實(shí)現(xiàn)效果圖

?

?

使用el-cascader代碼片段

<el-cascader
   style="width: 100%"
   :options="twoDatas"
   :props="twoProps"
   collapse-tags
   clearable
   filterable
   v-model="twoinput"
    @change="selectHandle"
></el-cascader>

js代碼

data數(shù)據(jù)設(shè)置：

twoProps: { multiple: true,
value: "value",label: "label",children: "children", },
twoDatas: [],//從接口獲取過來(lái)的數(shù)據(jù)
twoinput: [],//v-model使用的  要提交的數(shù)據(jù)
lastSelectedList: [],// 上次選中的數(shù)據(jù)
oneDimensionalList: [],//  源數(shù)據(jù)平鋪成一級(jí)節(jié)點(diǎn)

mounted() {
    // 全選的數(shù)據(jù)
    this.oneDimensionalList = [];
  },

getTreeList(list) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.label !== "全選") {
          this.oneDimensionalList.push(list[i]);
        }
        if (a.children && a.children.length > 0) {
          let res = _this.getTreeList(a.children);
          if (res) {
            return res;
          }
        }
      }
    },
    judgetAllSelected(node) {
      // 判斷是否是全選,也就是看已選擇的選中中包不包含"全選"
      let isAllSelected = false;
      for (let i = 0; i < node.length; i++) {
        if (node[i][0] === "全選") {
          isAllSelected = true;
          break;
        }
      }
      return isAllSelected;
    },
    loopSelectData(list, parentNode = []) {
      list.length > 0 &&
        list.forEach((e) => {
          let pNode = [...parentNode]; // 注意這里必須是深拷貝，否則會(huì)由于引用類型賦值的是地址（指針），導(dǎo)致parentNode在pNode更新時(shí)，同時(shí)被更新
          if (e.children && e.children.length > 0) {
            pNode.push(e.value); // 1 11
            this.loopSelectData(e.children, pNode);
          } else {
            if (parentNode.length > 0) {
              this.twoinput.push([...parentNode, e.value]);
            } else {
              this.twoinput.push([e.value]);
            }
          }
        });
    },
    checkIsAddAllSelected() {
      // 通過dom獲取到控制全選，不選，半選的樣式
      let label1 = document
        .querySelector(".el-cascader-panel")
        .querySelector(".el-cascader-menu__wrap")
        .querySelectorAll("li")[0]
        .querySelectorAll("label")[0];
      let span1 = document
        .querySelector(".el-cascader-panel")
        .querySelector(".el-cascader-menu__wrap")
        .querySelectorAll("li")[0]
        .querySelectorAll("label")[0]
        .querySelectorAll("span")[0];

      // 獲取所有的數(shù)據(jù)
      let list = this.twoDatas; // 原始數(shù)據(jù)列表
      if (this.oneDimensionalList.length === 0) {
        this.getTreeList(list); // 把所有的父子級(jí)平鋪成一個(gè)一級(jí)列表
      }

      let origin = [...this.oneDimensionalList].filter(
        (item) => !item.children
      ); //獲取所有的葉子節(jié)點(diǎn)
      let nowList = [...this.twoinput].filter(
        (item) => item[0] !== "全選"
      );

      // 半選時(shí), 如果有之前選過全選,要把全選過濾掉
      if (origin.length > nowList.length && nowList.length != 0) {
        this.twoinput = this.twoinput.filter(
          (item) => item[0] !== "全選"
        );
        //設(shè)置半選樣式，setTimeout可以解決樣式渲染不上的問題
        setTimeout(function () {
          label1.className = "el-checkbox";
          span1.className = "el-checkbox__input is-indeterminate";
        }, 1);
      } else if (nowList.length == 0) {
        //不選時(shí), 如果有之前選過全選,要把全選過濾掉
        this.twoinput = this.twoinput.filter(
          (item) => item[0] !== "全選"
        );
        label1.className = "el-checkbox";
        span1.className = "el-checkbox__input";
      } else {
        // 當(dāng)所有的數(shù)據(jù)都選擇時(shí), 要自動(dòng)把全選勾選上  最后這種是：origin.length == nowList.length
        if (this.twoinput[0] && this.twoinput[0][0] !== "全選") {
          this.twoinput = [["全選"], ...this.twoinput];
          label1.className = "el-checkbox";
          span1.className = "el-checkbox__input is-checked";
        }
      }
    },
    // 選擇級(jí)聯(lián)選擇器
    async selectHandle(e = []) {
      this.twoinput = [];

      // 選中的數(shù)據(jù)格式: [['全選'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
      let list = this.twoDatas; //級(jí)聯(lián)選擇器的數(shù)據(jù)
      let current = []; // 獲取當(dāng)前選中的哪個(gè)數(shù)據(jù)，因?yàn)閑lement文檔中沒有獲取當(dāng)前選中數(shù)據(jù)的方法，只能通過上次選中的數(shù)據(jù)和這次選中的數(shù)據(jù)進(jìn)行比較來(lái)獲取

      // 選中的所有數(shù)據(jù)list和上一次選中的list進(jìn)行比較
      if (e.length >= this.lastSelectedList.length) {
        let keys = this.lastSelectedList.map((item) => JSON.stringify(item));
        current = e.filter((item) => !keys.includes(JSON.stringify(item)));
      } else {
        // 取消選中
        let keys = e.map((item) => JSON.stringify(item));
        current = this.lastSelectedList.filter(
          (item) => !keys.includes(JSON.stringify(item))
        );
      }
      // 根據(jù)element的選中數(shù)據(jù)格式, 每一個(gè)選項(xiàng)都是一個(gè)列表, 列表第一項(xiàng)為父級(jí)value, 第二項(xiàng)為選中的子級(jí)value, ...以此類推
      const currentValue = current.length > 0 ? current[0][0] || "" : "";
      if (currentValue === "全選") {
        if (this.judgetAllSelected(e)) {
          this.loopSelectData(list); //獲取全選時(shí)回顯的數(shù)據(jù)
        } else {
          this.twoinput = []; //不選
        }
      } else {
        this.twoinput = e; //半選
      }
      // 根據(jù)當(dāng)前選擇的數(shù)據(jù)（不包括全選）和全選時(shí)所有的數(shù)據(jù)--進(jìn)行對(duì)比
      this.checkIsAddAllSelected();

      this.lastSelectedList = this.twoinput; // 保存上一次的選擇結(jié)果
    },

// 這里是處理成自己需要的數(shù)據(jù)格式, 需要把全選的這一選項(xiàng)過濾掉

// 原始選擇的數(shù)據(jù)格式 [['全選'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]

//因?yàn)槲易约盒枰臄?shù)據(jù)是“2,3,4,5”的格式，做了以下處理

let studentIds = [];
this.twoinput.forEach((item) => {
    if(item[1]){
       studentIds.push(item[1]);
    }
});
this.form.studentIds = studentIds.join(",");

注:本文是根據(jù)別人的文章，實(shí)現(xiàn)的功能，主要是記錄以下，方便自己以后使用,可以去原文查看,鏈接為el-cascader添加全選，設(shè)置全選、不選、半選文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-527279.html

到了這里，關(guān)于vue+element UI 使用el-cascader實(shí)現(xiàn)全選功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！