ElementUI中兩個Select選擇聯(lián)動效果實現(xiàn)方法

更新時間：2023年08月03日 11:28:11 作者：祁一枝

這篇文章主要給大家介紹了關于ElementUI中兩個Select選擇聯(lián)動效果實現(xiàn)的相關資料,在前端項目開發(fā)中,經(jīng)常會遇到省市縣三級聯(lián)動的下拉列表框組的問題,需要的朋友可以參考下

先上圖

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

代碼如下

第一個循環(huán)數(shù)組為procedureType 第二個是causeGroup 暫且稱之為父級與子級

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

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

 methods: {
    changeSelect() {
      // 聯(lián)動子級滯空
      this.ruleForm.cause_group = "";
      // 循環(huán)遍歷父級
      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: [],
    };
  },

到這里已經(jīng)實現(xiàn)了兩個Select下拉聯(lián)動的效果關鍵就在于將定義好的值賦值給子級數(shù)組本文是模擬假數(shù)據(jù) 所以直接在數(shù)組定義數(shù)據(jù) 如果是從接口拿值在接口請求處將數(shù)據(jù)賦給procedureType與TypeObj即可其實還有更簡單的寫法子級數(shù)組直接循環(huán) 不進行賦值操作但仍需保留滯空操作

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