實(shí)現(xiàn)ElementUI中兩個(gè)Select選擇聯(lián)動(dòng)效果

先上圖

通過賦值的方式實(shí)現(xiàn) 即子級(jí)下拉選項(xiàng)循環(huán)數(shù)組為空 將所需的值對(duì)空數(shù)組重新賦值

代碼如下 第一個(gè)循環(huán)數(shù)組為procedureType 第二個(gè)是causeGroup 暫且稱之為父級(jí)與子級(jí)

  <el-select 
     v-model="ruleForm.procedure_type" 
     placeholder="請(qǐng)選擇" 
     @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="請(qǐng)選擇" 
      style="margin-left: 30px"
      >
      <el-option
        v-for="(item,i) in causeGroup"
        :key="i"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

須注意的是父級(jí)下拉綁定的change事件 要對(duì)子級(jí)作出滯空操作 也就是清空子選項(xiàng)的值
不然會(huì)出現(xiàn)切換選項(xiàng)1 或者 選項(xiàng)2的時(shí)候子級(jí)選項(xiàng)值保留的問題 如下所示

 methods: {
    changeSelect() {
      // 聯(lián)動(dòng)子級(jí)滯空
      this.ruleForm.cause_group = "";
      // 循環(huán)遍歷父級(jí)
      for (const k in this.procedureType) {
        if (this.ruleForm.procedure_type === this.procedureType[k]) {
        // 核心代碼在這里 進(jìn)行賦值操作
          this.causeGroup = this.TypeObj[this.ruleForm.procedure_type];
        }
      }
    },
  },
  data() {
    return {
    // 在這里定義所需的值
      procedureType: ["選項(xiàng)a", "選項(xiàng)b"],
      TypeObj: {
        選項(xiàng)a: ["連級(jí)選項(xiàng)a1", "連級(jí)選項(xiàng)a2", "連級(jí)選項(xiàng)a3"],
        選項(xiàng)b: ["連級(jí)選項(xiàng)b1", "連級(jí)選項(xiàng)b2", "連級(jí)選項(xiàng)b3"],
      },
      ruleForm: {
        procedure_type: "",
        cause_group: "",
      },
      // 由 changeSelect 接管 causeGroup 的值
      causeGroup: [],
    };
  },

到這里已經(jīng)實(shí)現(xiàn)了兩個(gè)Select下拉聯(lián)動(dòng)的效果 關(guān)鍵就在于將定義好的值賦值給子級(jí)數(shù)組
本文是模擬假數(shù)據(jù) 所以直接在數(shù)組定義數(shù)據(jù) 如果是從接口拿值 在接口請(qǐng)求處將數(shù)據(jù)賦給procedureType與TypeObj即可
其實(shí)還有更簡單的寫法 子級(jí)數(shù)組直接循環(huán) 不進(jìn)行賦值操作 但仍需保留滯空操作文章來源地址http://www.zghlxwxcb.cn/news/detail-556008.html

<el-select
      v-model="ruleForm.cause_group"
      placeholder="請(qǐng)選擇"
      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>

到了這里，關(guān)于實(shí)現(xiàn)ElementUI中兩個(gè)Select選擇聯(lián)動(dòng)效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！