element-ui中el-cascader实现全选功能

el-cascader一层级实现全选功能

前言

由于特殊需要，需要在多个検索バー统一使用el-cascader来实现.但由于element并未提供改功能，简单做下总结

业务需求

在只有一层级的数据中（没有children）实现全选功能

工具

1. codepen在线编码
2. element-ui官网-级联选择器

代码

可以直接copy到在线编码工具中

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<!-- 核心代码 -->
  <el-cascader
    v-model="checkedForm.org_names"
    :options="org_options"
    :props="props"
    collapse-tags
    @change="cardChange"
    clearable></el-cascader>
</div>

CSS

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

JS

var Main = {
  data() {
    return {
      props: { multiple: true },
      earlySelected: [],
      checkedForm: {
        org_names: []
      },
      // 对于半全选，判断全选功能的进入或是退出
      flag: false,
      org_options: [
        {
          value: "",
          label: "全て"
        },
        {
          value: "1",
          label: "东南"
        },
        {
          value: "2",
          label: "西北"
        },
        {
          value: "3",
          label: "东北"
        },
        {
          value: "4",
          label: "西南"
        }
      ]
    };
  },
  methods: {
    cardChange(event) {
      const currentSelected = event.map((items) => items[0]);
      const differenceMakers = [
        ...currentSelected.filter((item) => !this.earlySelected.includes(item)),
        ...this.earlySelected.filter((item) => !currentSelected.includes(item))
      ];
      if (differenceMakers.includes("")) {
        if (currentSelected.includes("")) {
          // 全選択
          this.checkedForm.org_names = this.org_options.map(
            (item) => item["value"]
          );
          this.flag = true
        } else {
          // 全選択解消
          this.checkedForm.org_names = [];
          this.flag = false
        }
      } else {
        const options = this.org_options
          .map((item) => item["value"])
          .filter((item) => item);
        const optionsSelectedCurrent = currentSelected.filter((item) => item);
        if (options.length === optionsSelectedCurrent.length) {
          this.checkedForm.org_names = this.org_options.map(
            (item) => item["value"]
          );
          this.flag = true
        } else if (options.length > optionsSelectedCurrent.length) {
          this.checkedForm.org_names = this.flag ? this.org_options
            .filter((item) => item["value"])
            .filter((item) => item["value"] !== differenceMakers[0])
            .map((item) => item["value"]) : event.map((items) => items[0]);
          this.flag = false
        } else {
          this.checkedForm.org_names = [];
        }
      }
      this.earlySelected = this.checkedForm.org_names;
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

思路分析

注意

1. 绑定的值并不是提交的值，基于自己需求做处理。