element多选级联框，反选功能

效果：

代码如下：

父组件

 <el-form-item label="反选级联框">
   <NewCascader
     v-model="queryInput.arg"
     @change="cascaderChange($event)"
   />
 </el-form-item>
<script>
// ...其他代码
components: { NewCascader },
methods: {
  cascaderChange(value) {
    this.$set(this.queryInput, "arg", value);
  },
}
// ...其他代码
 </script>

子组件

<template>
  <div>
    <el-cascader
      ref="cascader"
      v-model="selectData"
      :options="options"
      filterable
      clearable
      :show-all-levels="false"
      :props="propConfig"
      collapse-tags
      @change="cascaderChange"
      >
    </el-cascader>
    <el-checkbox v-if="hasReverse" style="padding-left:10px" @change="selectReverse">反选</el-checkbox>
  </div>
</template>

<script>
export default {
  props: {
    multiple: {
      type: Boolean,
      default: true,
    },
    emitPath: {
      type: Boolean,
      default: true,
    },
    // 是否显示反选按钮
    hasReverse: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      propConfig: {
        expandTrigger: "hover",
        emitPath: this.emitPath,
        multiple: this.multiple,
        label: "displayName",
        value: "id",
      },
      options: [],
      selectData : [],
    };
  },
  created() {
    this.getOptions();
  },
  methods: {
    // 获取选项
    getOptions(){
    	this.options = 
    	[{
    		name:"1",
    		children:[{
    			name: "11",
	    		children:[{
	    			name: "111"
	    		}]
    		}]
    	},{
   			name: "2",
   			children: []  		.
		}];
    }
  	// 全部
    selectAll(){
      var model = []
      function tree2arr(arr, str, level) {
        arr.forEach(item => {
          let newStr = str.length ? [...str, item.id] : [item.id];
          if (item.children) {
            tree2arr(item.children, newStr, level + 1)
          } else {
            model.push(newStr)
          }
        })
      }
      tree2arr(this.options, [], 0)
      return model
    },
    // 反选
    selectReverse(){
      let allArr = this.selectAll()
      let temp = [...this.selectData]
      let arr = [];

      allArr.forEach((a)=>{
        if(temp){
          let index = temp.findIndex((b) => {
            return a.toString() == b.toString()
          });
          if (index > -1) temp = temp.slice(index + 1)
          else arr.push(a);
        }
      });
      this.selectData = arr
      this.cascaderChange(arr);
    },
    // 选项变化事件
    cascaderChange(val) {
      if(!val.length || val.length <= 0)
        this.$emit('change', val != null ? val.toString() : null)
      else 
      {
        var all = val.reduce(function(pre, cur, index, val) {
          if(typeof(cur) == "object")
            return Array.from(new Set(cur.concat(pre)));
          else if(typeof(cur) == "number")
            var tempArr = [cur]
            return Array.from(new Set(tempArr.concat(pre)));
        })
        this.$emit('change', all.toString())
      }
    }
  },
}
</script>