Vue下拉框雙向聯(lián)動(dòng)效果的示例代碼
一、前言
在開(kāi)發(fā)前端頁(yè)面的時(shí)候，常常需要寫(xiě)下拉框，普通常見(jiàn)的下拉框有在頁(yè)面寫(xiě)死固定值的下拉框，有通過(guò)調(diào)用后臺(tái)接口服務(wù)而獲取的值列表等。無(wú)論是原始的jsp頁(yè)面html頁(yè)面等，還是現(xiàn)在流行的vue angluar.js等，邏輯都是一樣。本文講解VUE頁(yè)面中，多個(gè)下拉框如何實(shí)現(xiàn)雙向聯(lián)動(dòng)效果。
二、代碼示例
2.1 在vue頁(yè)面的<el-form 表單里填充兩個(gè)<el-col :span="12">選項(xiàng)，分別為選項(xiàng)A和選項(xiàng)B，如下所示：
<el-col :span="12">
<el-form-item label="選項(xiàng)A" prop="A">
<el-select style="width: 100%;" @change="changeAList($event)"
v-model="temp.A"
filterable
remote
clearable
placeholder="請(qǐng)選擇"
:remote-method="getAMethod"
:loading="loading">
<el-option
v-for="item in ListA"
:key="item.value"
:label="item.value"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" >
<el-form-item label="選項(xiàng)B" prop="B">
<el-select style="width: 100%;" @change="changeBList($event)"
v-model="temp.B"
filterable
remote
clearable
placeholder="請(qǐng)選擇"
:remote-method="getBMethod"
:loading="loading">
<el-option
v-for="item in ListB"
:key="item.value"
:label="item.value"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
</el-col>2.2 在data的return模塊定義兩個(gè)list集合，用于裝載選項(xiàng)A和選項(xiàng)B的數(shù)據(jù)list集
data() {
return {
ListA: [],
ListB: [],
}2.3 在methods: 方法區(qū)定義下拉框選項(xiàng)加載從后臺(tái)接口服務(wù)獲取的方法。getAMethod用來(lái)加載A選項(xiàng)的下拉框內(nèi)容。getBMethod用來(lái)加載B選項(xiàng)的下拉框內(nèi)容。
getAMethod(temp) {
XXAPI.getAValue(temp)
.then(response => {
if(response.data && response.status == 200){
this.ListA= []
var result = response.data.data.XX
let jsonObj = JSON.parse(result);
for (let k of Object.keys(jsonObj)) {
this.ListA.push(
{
label: k,
value: jsonObj[k].屬性A,
}
)
}
}
})
},
getBMethod(temp) {
XXAPI.getDicValue2(temp)
.then(response => {
if(response.data && response.status == 200){
this.ListB = []
var result = response.data.data.XX
let jsonObj = JSON.parse(result);
for (let k of Object.keys(jsonObj)) {
this.ListB .push(
{
label: k,
value: jsonObj[k].屬性B,
}
)
}
}
})
},上述步驟僅完成基本的框架搭建，也就是說(shuō)后臺(tái)和前端的數(shù)據(jù)集合裝載以及接口服務(wù)調(diào)用用以獲取數(shù)據(jù)集合等。
2.4 實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)。也就是圖1中已經(jīng)標(biāo)注的：
@change="changeAList($event) 和?@change="changeBList($event)
通過(guò)這2個(gè)方法即可實(shí)現(xiàn)兩個(gè)下拉框的雙向聯(lián)動(dòng)效果。
同樣在methods:方法區(qū)定義方法：
changeBList(e){
this.indexSelectB(e)
},
changeAList(e){
this.indexSelectA(e)
},
indexSelectB(e){
if(this.ListA == undefined || this.ListA .length <= 0){
this.getAMethod(this.temp);
}
let i = 0;
for (i = 0;i<this.ListA .length;i++) {
if (this.ListA [i].label == e){
this.temp.A= this.ListA [i].value;
break
}
}
},
indexSelectA(e){
if(this.ListB == undefined || this.ListB.length <= 0){
this.getBMethod(this.temp);
}
let i = 0;
for (i = 0;i<this.ListB.length;i++) {
if (this.ListB[i].label == e){
this.temp.B= this.ListB[i].value;
break
}
}
}以上方法即可實(shí)現(xiàn)選項(xiàng)A和選項(xiàng)B兩個(gè)下拉框的雙向聯(lián)動(dòng)。但是有個(gè)小缺陷，必須要輸入字符后才能加載出來(lái)數(shù)據(jù)。
這是因?yàn)闆](méi)有在頁(yè)面創(chuàng)建的時(shí)候，就把后臺(tái)的數(shù)據(jù)load出來(lái)，實(shí)現(xiàn)這個(gè)效果也很簡(jiǎn)單，只需要在created模塊中調(diào)用兩個(gè)加載后臺(tái)接口服務(wù)的方法即可，如下：
created() {
...
this.getAMethod(this.temp);
this.getBMethod(this.temp);
...
},到此這篇關(guān)于Vue下拉框雙向聯(lián)動(dòng)的文章就介紹到這了,更多相關(guān)Vue下拉框雙向聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例
今天小編就為大家分享一篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作
這篇文章主要介紹了Antd中單個(gè)DatePicker限定時(shí)間輸入范圍操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
在Vue中實(shí)現(xiàn)對(duì)文件的壓縮和解壓縮功能
在前端開(kāi)發(fā)中,文件的壓縮和解壓縮是經(jīng)常需要用到的功能,尤其是在需要上傳和下載文件的場(chǎng)景下,文件壓縮可以減小文件大小,加快文件傳輸速度,提高用戶體驗(yàn),本文將介紹在Vue項(xiàng)目中如何進(jìn)行文件的壓縮和解壓縮,需要的朋友可以參考下2023-11-11
vue下使用nginx刷新頁(yè)面404的問(wèn)題解決
這篇文章主要介紹了vue下使用nginx刷新頁(yè)面404的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了如何查看vue-cli版本的兩個(gè)命令問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01