el-select下拉框实现双向联动

页面有下拉框A和B，

B初始没有数据，当选择了A下拉框中的X

B下拉框的内容对应A下拉框选中对应内容X

当A清空时 B则同时清空

表单部分：

下拉框A绑定change事件

<el-select v-model="dataForm.blockCode" clearable placeholder="请选择A" @change="groupSelect">
    <el-option v-for="item in groupOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
 </el-select>
<el-select v-model="dataForm.columnCodes"  multiple clearable placeholder="请选择B">
     <el-option v-for="item in arrangeOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
</el-select>

数据分两种情况：

1.AB的数据源是同一个接口返回

当A的选择内容发生变化时，先清空daForm的内容，延迟正则验证

通过find遍历得到A选中的那一条数据的children就是B的内容

groupOptions：[] //A列表
arrangeOptions：[] //B列表
dataForm：{
    columnCodes:[]
}
// 获取A
getList(){
 DownList({inventoryCountId : this.dataForm.inventoryCountId}).then(res => {
   this.groupOptions=res.data
 )
},
//获取B
customerSelect(id){
  delete this.dataForm.columnCodes;
  this.$set(this.dataForm, "columnCodes", []);
  this.$nextTick(()=>{
     this.$refs['dataForm'].clearValidate('columnCodes'); 
  })
   let arr= this.groupOptions.find(item => item.id === id);
   this.arrangeOptions= arr.children
},

2.当AB数据源是两个接口返回时

先判断A里面内容是否为空如果为空则B的内容也为空

A不为空时，在把A的key作为参数

 // 获取A
   getList(){
      DownList({inventoryCountId : this.dataForm.inventoryCountId}).then(res => {
        this.groupOptions=res.data
      })
    },
    // A选择后获取B的数据
    groupSelect(val){
      if(val === ''){
        delete this.dataForm.columnCodes;
        this.$set(this.dataForm, "columnCodes", []);
        this.arrangeOptions = []
      }else{
        this.arrangeList={
          Code : val,// A的key
        }
        columnDownList( this.arrangeList ).then(res => {
          this.arrangeOptions = res.data
        })
      }
    },

el-select下拉框实现双向联动

猜你喜欢