快捷導(dǎo)航

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

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

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

先上圖

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

代碼如下

第一個(gè)循環(huán)數(shù)組為procedureType 第二個(gè)是causeGroup 暫且稱(chēng)之為父級(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)值保留的問(wèn)題如下所示

 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í)還有更簡(jiǎn)單的寫(xiě)法子級(jí)數(shù)組直接循環(huán) 不進(jìn)行賦值操作但仍需保留滯空操作

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

總結(jié)

到此這篇關(guān)于ElementUI中兩個(gè)Select選擇聯(lián)動(dòng)效果實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)ElementUI Select選擇聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: