Vue页面下拉框联动教程：实现双向数据交互

一、前言

在开发前端页面的时候，常常需要写下拉框，普通常见的下拉框有在页面写死固定值的下拉框，有通过调用后台接口服务而获取的值列表等。无论是原始的jsp页面html页面等，还是现在流行的vue angluar.js等，逻辑都是一样。本文讲解VUE页面中，多个下拉框如何实现双向联动效果。

二、代码示例

2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项，分别为选项A和选项B，如下所示：

less 复制代码

<el-col :span&#61;&#34;12&#34;>
    <el-form-item label&#61;&#34;选项A&#34;  prop&#61;&#34;A&#34;>            
      <el-select style&#61;&#34;width: 100%;&#34; &#64;change&#61;&#34;changeAList($event)&#34;
        v-model&#61;&#34;temp.A&#34;
        filterable
        remote
        clearable
        placeholder&#61;&#34;请选择&#34;
        :remote-method&#61;&#34;getAMethod&#34;
        :loading&#61;&#34;loading&#34;>
        <el-option
          v-for&#61;&#34;item in ListA&#34;
          :key&#61;&#34;item.value&#34;
          :label&#61;&#34;item.value&#34;
          :value&#61;&#34;item.label&#34;>
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :md&#61;&#34;12&#34; >
    <el-form-item label&#61;&#34;选项B&#34;  prop&#61;&#34;B&#34;>            
      <el-select style&#61;&#34;width: 100%;&#34; &#64;change&#61;&#34;changeBList($event)&#34;
        v-model&#61;&#34;temp.B&#34;
        filterable
        remote
        clearable
        placeholder&#61;&#34;请选择&#34;
        :remote-method&#61;&#34;getBMethod&#34;
        :loading&#61;&#34;loading&#34;>
        <el-option
          v-for&#61;&#34;item in ListB&#34;
          :key&#61;&#34;item.value&#34;
          :label&#61;&#34;item.value&#34;
          :value&#61;&#34;item.label&#34;>
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>

2.2 在data的return模块定义两个list集合，用于装载选项A和选项B的数据list集

data() { return {

ListA: [],

ListB: [], }

2.3 在methods: 方法区定义下拉框选项加载从后台接口服务获��的方法。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, } ) } } }) },

上述步骤仅完成基本的框架搭建，也就是说后台和前端的数据集合装载以及接口服务调用用以获取数据集合等。

2.4 实现联动，大家都知道在vue的页面中，想要实现多个<el-select 下拉框的值动态改变，必须要调用@change 函数。也就是图1中已经标注的：

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

通过这2个方法即可实现两个下拉框的双向联动效果。

同样在methods:方法区定义方法：

changeBList(e){ this.indexSelectB(e) }, changeAList(e){ this.indexSelectA(e) },

kotlin 复制代码

 indexSelectB(e){
    if(this.ListA &#61;&#61; undefined || this.ListA .length <&#61; 0){
        this.getAMethod(this.temp);
    }
    let i &#61; 0;
    for (i &#61; 0;i<this.ListA .length;i&#43;&#43;) {
      if (this.ListA [i].label &#61;&#61; e){
        this.temp.A&#61; this.ListA [i].value;
        break
      }
    }
  },
  indexSelectA(e){
    if(this.ListB &#61;&#61; undefined || this.ListB.length <&#61; 0){
        this.getBMethod(this.temp);
    }
    let i &#61; 0;
    for (i &#61; 0;i<this.ListB.length;i&#43;&#43;) {
      if (this.ListB[i].label &#61;&#61; e){
        this.temp.B&#61; this.ListB[i].value;
        break
      }
    }
  }

以上方法即可实现选项A和选项B两个下拉框的双向联动。但是有个小缺陷，必须要输入字符后才能加载出来数据。

这是因为没有在页面创建的时候，就把后台的数据load出来，实现这个效果也很简单，只需要在created模块中调用两个加载后台接口服务的方法即可，如下：

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