vue+element UI 使用el-cascader实现全选功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element UI 使用el-cascader实现全选功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现效果图

cascader全选,vue+element ui,vue,vue.js,javascript,elementui

使用el-cascader代码片段

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

js代码

data数据设置：

twoProps: { multiple: true,
value: "value",label: "label",children: "children", },
twoDatas: [],//从接口获取过来的数据
twoinput: [],//v-model使用的  要提交的数据
lastSelectedList: [],// 上次选中的数据
oneDimensionalList: [],//  源数据平铺成一级节点

mounted() {
    // 全选的数据
    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]; // 注意这里必须是深拷贝，否则会由于引用类型赋值的是地址（指针），导致parentNode在pNode更新时，同时被更新
          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];

      // 获取所有的数据
      let list = this.twoDatas; // 原始数据列表
      if (this.oneDimensionalList.length === 0) {
        this.getTreeList(list); // 把所有的父子级平铺成一个一级列表
      }

      let origin = [...this.oneDimensionalList].filter(
        (item) => !item.children
      ); //获取所有的叶子节点
      let nowList = [...this.twoinput].filter(
        (item) => item[0] !== "全选"
      );

      // 半选时, 如果有之前选过全选,要把全选过滤掉
      if (origin.length > nowList.length && nowList.length != 0) {
        this.twoinput = this.twoinput.filter(
          (item) => item[0] !== "全选"
        );
        //设置半选样式，setTimeout可以解决样式渲染不上的问题
        setTimeout(function () {
          label1.className = "el-checkbox";
          span1.className = "el-checkbox__input is-indeterminate";
        }, 1);
      } else if (nowList.length == 0) {
        //不选时, 如果有之前选过全选,要把全选过滤掉
        this.twoinput = this.twoinput.filter(
          (item) => item[0] !== "全选"
        );
        label1.className = "el-checkbox";
        span1.className = "el-checkbox__input";
      } else {
        // 当所有的数据都选择时, 要自动把全选勾选上  最后这种是：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";
        }
      }
    },
    // 选择级联选择器
    async selectHandle(e = []) {
      this.twoinput = [];

      // 选中的数据格式: [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]
      let list = this.twoDatas; //级联选择器的数据
      let current = []; // 获取当前选中的哪个数据，因为element文档中没有获取当前选中数据的方法，只能通过上次选中的数据和这次选中的数据进行比较来获取

      // 选中的所有数据list和上一次选中的list进行比较
      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))
        );
      }
      // 根据element的选中数据格式, 每一个选项都是一个列表, 列表第一项为父级value, 第二项为选中的子级value, ...以此类推
      const currentValue = current.length > 0 ? current[0][0] || "" : "";
      if (currentValue === "全选") {
        if (this.judgetAllSelected(e)) {
          this.loopSelectData(list); //获取全选时回显的数据
        } else {
          this.twoinput = []; //不选
        }
      } else {
        this.twoinput = e; //半选
      }
      // 根据当前选择的数据（不包括全选）和全选时所有的数据--进行对比
      this.checkIsAddAllSelected();

      this.lastSelectedList = this.twoinput; // 保存上一次的选择结果
    },

// 这里是处理成自己需要的数据格式, 需要把全选的这一选项过滤掉

// 原始选择的数据格式 [['全选'], [1, 2], [1, 3], [1, 4],[5, 6], [5, 7, 8],5, 7, 9],[10]]

//因为我自己需要的数据是“2,3,4,5”的格式，做了以下处理

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

注:本文是根据别人的文章，实现的功能，主要是记录以下，方便自己以后使用,可以去原文查看,链接为el-cascader添加全选，设置全选、不选、半选文章来源地址https://www.toymoban.com/news/detail-527279.html

到了这里，关于vue+element UI 使用el-cascader实现全选功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！