vue中下拉框組件的封裝方式
vue下拉框組件的封裝
原理
vue element中，需要封裝一個(gè)對(duì)應(yīng)的下拉款組件。
第一步：在api_domain.js中添加后臺(tái)的請(qǐng)求接口
//獲取下拉框的接口 從redis中
domainGetDomainKeyRedis: params => {
return axios.post('domain-manager/domain/getDomainKeyRedis',qs.stringify(params));
},
//獲取下拉框的接口 從DB中
domainGetDomainKeyDB: params => {
return axios.post('domain-manager/domain/getDomainKeyDB',qs.stringify(params));
},
第二步，在文件夾api中新建getSelect.js，內(nèi)容
/**
* _this為傳過(guò)來(lái)的this
*
* 根據(jù)參數(shù)str,去獲取到對(duì)應(yīng)的下拉框的值
*
* paramName,接收的數(shù)組，如'type'
*
* 先去redis總查詢，如果沒(méi)有值，再去數(shù)據(jù)庫(kù)中查詢
*/
import api from '@/api/api_domain'
export function GetSelect(_this,str,paramName) {
let para = {
key: str
};
if(typeof str === "undefined" || str == ""){
// return options;
}else{
_this.$api.domain.domainGetDomainKeyRedis(para).then((res) => {
_this[paramName] = res.data.data.listDomainDefine;
}).catch((err)=>{
console.log(err);
});
}
}
使用
引入js
import {GetSelect} from '@/api/getSelect'取值
//獲取資源類型GetSelect(this,'resType','type');
resType，是傳遞到后臺(tái)方法的查詢條件，
就是在【域定義管理】中簡(jiǎn)稱，點(diǎn)擊【域值】按鈕可看到對(duì)應(yīng)的下拉框數(shù)據(jù)
type，是接受查詢出的list的參數(shù)，在頁(yè)面中我定義了type: []，用來(lái)接收，資源類型下拉框中的值
在頁(yè)面中
<el-form-item label="類型" prop="resType"> <el-select v-model="addForm.resType" filterable placeholder="請(qǐng)選擇" style="width:100%"> <el-option v-for="item in type" :key="item.key " :label="item.name" :value="item.key"> </el-option> </el-select> </el-form-item>
在table中怎么去顯示類型為中文名稱
<el-table-column prop="ptType" label="類型" min-width="10%" :formatter="formatType" > </el-table-column>
注意： :formatter=“formatType”
然后寫(xiě)一個(gè)方法formatType
formatType: function (row, column) {//類型轉(zhuǎn)換
for(var a = 0 ;a< this.options.length ; a++){
if(row.ptType == this.options[a].key){
return this.options[a].name;
}
}
},
vue封裝遠(yuǎn)程下拉框組件
之前封裝了一個(gè)遠(yuǎn)程搜索的輸入框，靜態(tài)在Vue官網(wǎng)看到一個(gè)類似的遠(yuǎn)程搜索下拉框，今天也封裝一個(gè)遠(yuǎn)程搜索下拉框，面對(duì)不同的需求
我們修改了官方提供的代碼來(lái)封裝了
父組件
RemoteSearch.vue
vue的參數(shù)是可以通過(guò)封裝在props內(nèi)，被其他界面引用
注意：
一：js中在調(diào)用json格式數(shù)組的值的時(shí)候——有兩種形式
以下為dataList數(shù)組
- ?形式一：dataList[0].name
- 形式二：dataList[0][name]
在有些時(shí)候會(huì)把**.變量**識(shí)別成調(diào)用，所以在一些情況下使用第二個(gè)效果更好
js的數(shù)組手動(dòng)設(shè)置值(給dataList設(shè)置一個(gè)value值)
dataList.value = ?
以下為引用的vue界面
<template>
<div>
<RemoteSearch :choose-flag="0" :auto-complete-column="name" ref="refreshData"></RemoteSearch>
<el-button type="primary" @click="refreshChartSearch" style="margin-left: 10px">重置</el-button>
</div>
</template>
<script>
import RemoteSearch from "@/components/select/RemoteSearch";
export default {
components: {
RemoteSearch
},
data(){
return {
}
},
methods:{
refreshChartSearch(){
this.$nextTick(() => {
this.$refs.refreshData.refreshData();
//DOM渲染完畢后就能正常獲取了
})
},
},
}
</script>
<style scoped>
</style>
只需要通過(guò)import導(dǎo)入對(duì)應(yīng)的組件，通過(guò)components來(lái)調(diào)用，并通過(guò)類似標(biāo)簽的形式來(lái)聲明
子組件通過(guò)父組件提供的props的參數(shù)重寫(xiě)（修改）父組件的參數(shù)
如果子組件不調(diào)用，props的參數(shù)就會(huì)是默認(rèn)的值。
子組件可以通過(guò)在標(biāo)簽內(nèi)使用:特定值的方式來(lái)修改值
重置的按鈕實(shí)現(xiàn)，可以參考之前封裝遠(yuǎn)程搜索輸入框的帖子
這里父組件的placeholder也可以做成讓子組件自己選擇的，但是我這里的形式比較通用，就沒(méi)有修改，有興趣的可以自行優(yōu)化
placeholder="請(qǐng)輸入內(nèi)容"
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題
這篇文章主要介紹了VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue實(shí)現(xiàn)全局的toast組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue2老項(xiàng)目中node-sass更換dart-sass的操作方法
這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了你不知道的SpringBoot與Vue部署解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法
在開(kāi)發(fā)中,通常遇到四種全局狀態(tài)數(shù)據(jù):異步數(shù)據(jù)、同步數(shù)據(jù),傳統(tǒng)的Vue3使用不同機(jī)制處理這些數(shù)據(jù),而Zova框架通過(guò)Model機(jī)制來(lái)統(tǒng)一管理,簡(jiǎn)化了數(shù)據(jù)處理流程,提高了代碼的可維護(hù)性,本文介紹在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法,感興趣的朋友一起看看吧2024-10-10
Element UI是一套基于Vue的桌面端組件庫(kù),封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06