Realize the linkage effect of two Select selections in ElementUI

Realize the linkage effect of two Select selections in ElementUI

First, the above picture

is realized by assignment, that is, the sub-level drop-down option cycle array is empty, and the required value is reassigned to the empty array

The code is as follows, the first loop array is procedureTypethe second one, causeGrouplet’s call it parent and child

  <el-select 
     v-model="ruleForm.procedure_type" 
     placeholder="请选择" 
     @change="changeSelect"
     >
      <el-option
        v-for="(item,i) in procedureType"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select 
      v-model="ruleForm.cause_group" 
      placeholder="请选择" 
      style="margin-left: 30px"
      >
      <el-option
        v-for="(item,i) in causeGroup"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

It should be noted that the change event bound by the parent drop-down must perform a blanking operation on the child, that is, otherwise there 清空子选项的值
will be a problem of retaining the value of the child option when switching option 1 or option 2, as shown below

 methods: {
    
    
    changeSelect() {
    
    
      // 联动子级滞空
      this.ruleForm.cause_group = "";
      // 循环遍历父级
      for (const k in this.procedureType) {
    
    
        if (this.ruleForm.procedure_type === this.procedureType[k]) {
    
    
        // 核心代码在这里 进行赋值操作
          this.causeGroup = this.TypeObj[this.ruleForm.procedure_type];
        }
      }
    },
  },
  data() {
    
    
    return {
    
    
    // 在这里定义所需的值
      procedureType: ["选项a", "选项b"],
      TypeObj: {
    
    
        选项a: ["连级选项a1", "连级选项a2", "连级选项a3"],
        选项b: ["连级选项b1", "连级选项b2", "连级选项b3"],
      },
      ruleForm: {
    
    
        procedure_type: "",
        cause_group: "",
      },
      // 由 changeSelect 接管 causeGroup 的值
      causeGroup: [],
    };
  },

So far, the effect of the two Select drop-down linkages has been realized. The key is to assign the defined value to the sub-level array.
This article is simulating fake data, so define the data directly in the array. If the value is obtained from the interface, assign the data to the interface request. procedureTypeIn TypeObjfact
, there is an easier way to write sub-level arrays to loop directly without performing assignment operations, but still need to retain empty operations

<el-select
      v-model="ruleForm.cause_group"
      placeholder="请选择"
      style="margin-left: 30px"
    >
      <el-option
        v-for="(item, i) in TypeObj[ruleForm.procedure_type]"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>