el-cascader 多选，全选回显父级标签（同antd 类似）

 实现效果

编辑

这个是关键点

编辑

基于vue2+element 实现

<template>
  <div class="allPadding">
    <el-cascader
      v-model="val"
      :options="options"
      :props="props"
      clearable
      :checkStrictly="true"
      @change="handleChange('myCascader')"
      :show-all-levels="true"
      ref="myCascader"
    ></el-cascader>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      val: [[1,2,3]],
      props: {
        multiple: true,
        checkStrictly: false,
      },
      options: [
        {
          value: 1,
          label: "东南",
          children: [
            {
              value: 2,
              label: "上海",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" },
              ],
            },
            {
              value: 7,
              label: "江苏",
              children: [
                { value: 8, label: "南京" },
                { value: 9, label: "苏州" },
                { value: 10, label: "无锡" },
              ],
            },
            {
              value: 12,
              label: "浙江",
              children: [
                { value: 13, label: "杭州" },
                { value: 14, label: "宁波" },
                { value: 15, label: "嘉兴" },
              ],
            },
          ],
        },
        {
          value: 17,
          label: "西北",
          children: [
            {
              value: 18,
              label: "陕西",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" },
              ],
            },
            {
              value: 21,
              label: "新疆",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted(){
    this.$nextTick(()=>{
      this.handleChange()
    })
  },
  methods: {
    handleChange(value) {
      let checkedNodeList = this.$refs.myCascader.getCheckedNodes();
      console.log(checkedNodeList, "checkedNodeList");
      checkedNodeList = checkedNodeList.filter(
        (item) => !(item.parent && item.parent.checked)
      );
     
      this.$nextTick(() => {
        let tagListBox = this.$refs.myCascader.$el.children[1]
        if(!checkedNodeList.length){
          tagListBox.innerHTML = "";
          return;
        }
        let dom = "";
        tagListBox.innerHTML = "";
        checkedNodeList.forEach((item, index) => {
          let spanA = document.createElement("span");
          spanA.className = "el-tag el-tag--info el-tag--small el-tag--light";
          let spanB = document.createElement("span");
          spanB.innerText = item.label;
          let iC = document.createElement("i");
          iC.className = "el-tag__close el-icon-close";
          iC.onclick = (e) => this.delCascaderTag(e, item,tagListBox);
          spanA.appendChild(spanB);
          spanA.appendChild(iC);
          tagListBox.appendChild(spanA);
        });
      });
    },
    delCascaderTag(el, info, box) {
      let child = el.target.parentNode;
      box.removeChild(child);
      let arr = JSON.parse(JSON.stringify(this.val));
      arr = arr.filter((item)=>{
        let flag = item.findIndex(el=> el == info.value);
        return flag == -1;
      })
      this.val = arr;
    },
  },
};
</script>
<style scoped>
</style>