VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)效果
本文實(shí)例為大家分享了VUE多個(gè)下拉框?qū)崿F(xiàn)雙向聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
一、前言
在開發(fā)前端頁(yè)面的時(shí)候，常常需要寫下拉框，普通常見的下拉框有在頁(yè)面寫死固定值的下拉框，有通過(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)闆]有在頁(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);
? ? ...
? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的@click.native 原生點(diǎn)擊事件
這篇文章主要介紹了vue中的@click.native 原生點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在 Vue.js 中,組件的重復(fù)渲染是一個(gè)常見的問(wèn)題,可能會(huì)影響應(yīng)用的性能和用戶體驗(yàn),為了提升應(yīng)用的性能,開發(fā)者需要理解 Vue 的渲染機(jī)制,并應(yīng)用有效的方法來(lái)避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復(fù)渲染,并提供相關(guān)示例代碼,需要的朋友可以參考下2024-10-10
這篇文章主要給大家介紹了關(guān)于vue3.0中使用element的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了vue調(diào)用語(yǔ)音播放的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue實(shí)現(xiàn)驗(yàn)證碼登錄全過(guò)程
這篇文章主要介紹了Vue實(shí)現(xiàn)驗(yàn)證碼登錄全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
在本篇文章里小編給大家整理了關(guān)于vue下canvas裁剪圖片實(shí)例講解內(nèi)容，需要的朋友們可以參考下。2020-04-04
這篇文章主要為大家介紹了Vue中使用Teleport的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08