快捷導(dǎo)航

如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能

更新時(shí)間：2024年03月25日 09:56:29 作者：__十七

這篇文章主要介紹了如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能,因?yàn)槭怯腥x的功能,所以不能直接使用el-cascader組件,?而是選擇使用el-select組件,?在此組件內(nèi)部使用el-cascader-panel級聯(lián)面板,感興趣的朋友跟隨小編一起看看吧

樣式

說明：級聯(lián)選擇器中加上全選的按鈕，并且保證數(shù)據(jù)響應(yīng)式。

思路

因?yàn)槭怯腥x的功能，所以不能直接使用el-cascader組件，而是選擇使用el-select組件，在此組件內(nèi)部使用el-cascader-panel級聯(lián)面板
全選按鈕也是寫在el-select組件中，并且去監(jiān)聽全選按鈕的狀態(tài)，根據(jù)全選的狀態(tài)，決定級聯(lián)面板的數(shù)據(jù)與樣式
如果想要獲取到最終選擇的數(shù)據(jù)，還是取級聯(lián)面板綁定的值，而不是select的值。

代碼實(shí)現(xiàn)

template:

注意：
1，el-select組件中，必須要寫入一個(gè)el-option組件，可以隱藏，但必須存在

2，選中的數(shù)據(jù)響應(yīng)式綁定的其實(shí)是級聯(lián)面板的數(shù)據(jù)，同步到了select中，并且滿足其展示的內(nèi)容，比如“已選中2項(xiàng)”

 <el-form-item>
        <div class="theme-date theme">
          <div class="theme-date-prepend">功能模塊</div>
          <el-select v-model="selectModuleData">
            <el-option style="display: none" value=""></el-option>
            <el-checkbox class="allselect" v-model="allSelectModule"
              >全選</el-checkbox
            >
            <el-cascader-panel
              ref="cascaderModule"
              :options="treeList"
              v-model="cascaderModuleData"
              popper-class="popper-select"
              :show-all-levels="false"
              :props="cascaderProp"
              clearable
            >
            </el-cascader-panel>
          </el-select>
        </div>
      </el-form-item>

script：

// data數(shù)據(jù)：
cascaderProp: {
        multiple: true,
        value: "name",
        label: "name",
        children: "children",
      },
allSelectModule: false,
cascaderModuleData: [],
selectModuleData: null,
// watch
watch: {
// 監(jiān)聽多選按鈕是否被勾選
    allSelectModule: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
        /// 執(zhí)行的方法，可以在下面的methods中尋找
          this.cascaderAllSelect();
        } else {
          if(!this.$refs.cascaderModule) return
          this.$refs.cascaderModule.clearCheckedNodes();
          this.$refs.cascaderModule.checkedValue = []; // 清空選中值
          this.cascaderModuleData = [];
          this.$refs.cascaderModule.activePath = []; // 清除高亮
          this.$refs.cascaderModule.syncActivePath(); // 初始化（只展示一級節(jié)點(diǎn)）
        }
      },
    },
    // 監(jiān)聽級聯(lián)面板綁定的數(shù)據(jù)去同步select的數(shù)據(jù)， 讓其顯示在選擇框中
    cascaderModuleData: {
      immediate: true,
      handler(newVal) {
        if (newVal.length === 0) {
          this.selectModuleData = "";
          if(!this.$refs.cascaderModule) return
          this.$refs.cascaderModule.activePath = []; // 清除高亮
          this.$refs.cascaderModule.syncActivePath(); // 初始化（只展示一級節(jié)點(diǎn)）
        } else {
          this.selectModuleData = `已選${newVal.length}項(xiàng)`;
        }
      },
    },
  },
/// methods
// 級聯(lián)選擇器全選， 其中moduleArray表示的是級聯(lián)面板綁定的數(shù)據(jù)，表示如果此時(shí)沒有全選的話那就將所有的數(shù)據(jù)，賦值到級聯(lián)面板中，這樣在顯示中，就表示全選的狀態(tài)。
    cascaderAllSelect() {
      if (this.cascaderModuleData.length !== this.moduleArray.length) {
        this.cascaderModuleData = this.moduleArray;
      }
    },
// 直接獲取級聯(lián)面板的數(shù)據(jù)cascaderModuleData， 作為參數(shù)提交即可

到此這篇關(guān)于如何使用el-cascader組件寫下拉級聯(lián)多選及全選功能的文章就介紹到這了,更多相關(guān)el-cascader下拉級聯(lián)多選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: