ElementUI中两个Select选择联动效果实现方法

  <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>

 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: [],
    };
  },

<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>