Vue怎么實現(xiàn)下拉框雙向聯(lián)動效果

今天小編給大家分享一下Vue怎么實現(xiàn)下拉框雙向聯(lián)動效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、前言

在開發(fā)前端頁面的時候，常常需要寫下拉框，普通常見的下拉框有在頁面寫死固定值的下拉框，有通過調用后臺接口服務而獲取的值列表等。無論是原始的jsp頁面html頁面等，還是現(xiàn)在流行的vue angluar.js等，邏輯都是一樣。本文講解VUE頁面中，多個下拉框如何實現(xiàn)雙向聯(lián)動效果。

二、代碼示例

2.1 在vue頁面的<el-form 表單里填充兩個<el-col :span="12">選項，分別為選項A和選項B，如下所示：

    <el-col :span="12">
        <el-form-item label="選項A"  prop="A">            
          <el-select  @change="changeAList($event)"
            v-model="temp.A"
            filterable
            remote
            clearable
            placeholder="請選擇"
            :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="選項B"  prop="B">            
          <el-select  @change="changeBList($event)"
            v-model="temp.B"
            filterable
            remote
            clearable
            placeholder="請選擇"
            :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模塊定義兩個list集合，用于裝載選項A和選項B的數(shù)據(jù)list集

data() {
    return {
              ListA: [],
              ListB: [],
        }

2.3 在methods: 方法區(qū)定義下拉框選項加載從后臺接口服務獲取的方法。getAMethod用來加載A選項的下拉框內容。getBMethod用來加載B選項的下拉框內容。

   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,
                }
              )
            }
          }
        })
      },

上述步驟僅完成基本的框架搭建，也就是說后臺和前端的數(shù)據(jù)集合裝載以及接口服務調用用以獲取數(shù)據(jù)集合等。

2.4 實現(xiàn)聯(lián)動，大家都知道在vue的頁面中，想要實現(xiàn)多個<el-select 下拉框的值動態(tài)改變，必須要調用@change 函數(shù)。也就是圖1中已經標注的：

@change="changeAList($event) 和 @change="changeBList($event)

通過這2個方法即可實現(xiàn)兩個下拉框的雙向聯(lián)動效果。

同樣在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
          }
        }
      }

以上方法即可實現(xiàn)選項A和選項B兩個下拉框的雙向聯(lián)動。但是有個小缺陷，必須要輸入字符后才能加載出來數(shù)據(jù)。

這是因為沒有在頁面創(chuàng)建的時候，就把后臺的數(shù)據(jù)load出來，實現(xiàn)這個效果也很簡單，只需要在created模塊中調用兩個加載后臺接口服務的方法即可，如下：

created() {
    ...
    this.getAMethod(this.temp);
    this.getBMethod(this.temp);
    ...
  },

以上就是“Vue怎么實現(xiàn)下拉框雙向聯(lián)動效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。