elementUI树形结构过滤后展示数据和多选框选择问题

elementUI树形结构过滤后展示数据和多选框选择问题

<template>
  <div>
    <div class="flex mt14">
      <InputSelect title="品牌" :options="taskObj" class="ml20" @change="handleBrand" :val="treeBrand"/>
      <div class="fs14 ml32">搜索</div>
      <el-input placeholder="输入关键字进行过滤" v-model.trim="treeIptSearch" class="w270 ml10"></el-input>
    </div>
    <div class="mt32 pd055 tree-wrapper">
      <el-tree
        :data="treeFormData"
        show-checkbox
        node-key="id"
        ref="tree"
        highlight-current
        :expand-on-click-node="false"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="getCheckNape"
        :default-expanded-keys="defaultExpandedKeys"
      >
      <!-- 展开所有 default-expand-all -->
      </el-tree>
    </div>
  </div>
</template>

<script>
import InputSelect from '@/components/Search/InputSelect';
export default {
  name: "TreeHotel",
  components: {
    InputSelect
  },
  props: {
    treeFormData:{
      type: Array,
      // required: true,
      default: () => {
        return []
      }
    },
    expandedKeys:{
      type: Array,
      default:()=>{
        return []
      }
    }
  },
  data() {
    return {
      // 标识用于父元素查找 注意唯一性
      treeHotelFlag:'treeHotelFlag',
      treeSelected:[],
      gruopManage:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 树形品牌
      taskObj: [
        {
          selectedValue: '',
          label: '全部',
        },{
          // selectedValue: '......',
          selectedValue: '......',
          label: '......',
        }
      ],
      treeBrand:'',
      treeIptSearch:'',
    };
  },
   computed: {
    defaultExpandedKeys:{
      get() {
        return this.expandedKeys;
      },
      set(newVal) {
        this.defaultExpandedKeys = newVal;
      },
    },
  },
  watch: {
    treeIptSearch(value) {
      this.$refs.tree.filter(value);
    }
  },
  methods: {
    // 树形选择
    handleBrand(value){
      // console.log(value);
      this.treeIptSearch = ""
      this.treeBrand = value
      this.$refs.tree.filter(value)
    },
    // 树形搜索
    filterNode(value, data, node) {
      if (!this.treeBrand && !this.treeIptSearch) return true;
      let parentNode = node.parent
		  let labels = [node.label]
		  let level = 1
		   while (level < node.level) {
		    labels = [...labels, parentNode.label]
		    parentNode = parentNode.parent
		    level++
		  }
      let regIpt = new RegExp(this.treeIptSearch, "g")
      let regBrand = new RegExp( this.treeBrand, "g")
      if(this.treeBrand && this.treeIptSearch){
        return labels.some(label => {
          return label.match(regIpt) || label.match(regBrand)
        })
      }else if(!this.treeBrand && this.treeIptSearch){
        return labels.some(label => {
          return label.match(regIpt)
        })
      }else if(this.treeBrand && !this.treeIptSearch){
        return labels.some(label => {
          return label.match(regBrand)
        })
      }
    },
    // 获取选中的项
    getCheckNape(data, nodeobj){
      // console.log(data, nodeobj);
      // console.log('传递选中的=',this.$refs.tree.getCheckedNodes(true, true));
      this.$emit('treeSelectedData', { executeObj:1, data: this.$refs.tree.getCheckedNodes(true, true)})
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.tree-wrapper{
  width: 99%;
  height: 370px;
  overflow: auto;
  @include scrollList(10px,5px,#CCCDD8,#F5F6FB);
}
</style>

会根据品牌和搜索关键字对树形结构数据进行搜索，但是多选框会选择除了过滤的数据；

接下来我重新整理下问题

目前有问题的先记录下来，有大佬遇到可以看下此问题；