Vue怎么实现下拉框双向联动效果

今天小编给大家分享一下Vue怎么实现下拉框双向联动效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

一、前言

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

二、代码示例

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的数据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)
    },
 
     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
          }
        }
      }

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

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

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

以上就是“Vue怎么实现下拉框双向联动效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。