element树形筛选

<el-input
  v-model="projectName"
  placeholder="请输入名称"
  clearable
  maxlength="10"
  @clear="clearTree"
/>
<el-divider />
<el-tree
  ref="tree"
  class="filter-tree"
  :data="treeList"
  :props="defaultProps"
  default-expand-all
  node-key="id"
  :highlight-current="highlightCurrent"
  :filter-node-method="filterNode"
  @node-click="handleNodeClick"
>
  <div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label">
    <span>{{ node.label }}span>
    <div class="button-group" @click.stop="() => {}">
       <el-link size="mini" type="primary" icon="el-icon-circle-plus-outline" @click.stop="onAddType(data)" />
       <el-link size="mini" type="primary" icon="el-icon-delete" @click.stop="onDelType(data)" />
    div>
  div>
el-tree>

projectName: '',
treeList: [],
defaultProps: {
  children: 'children',
  label: 'name'
},
 
 
 watch: {
    projectName: {
      handler(v) {
        // 监听输入框变化、进行实时过滤
        this.$refs.tree.filter(v)
      }
    }
  },
 
 methods: {
    // 过滤掉无用的数据
    filterNode(value, data, node) {
      if (!value.trim()) return true
      if (data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) { return true }
      return this.checkNodes(value, data, node)
    },
    // 筛选父级所需要的子级
    checkNodes(value, data, node) {
      const level = node.level
      if (level === 1) return false
      let parentData = node.parent
      let index = 0
      while (index < level - 1) {
        if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) return true
        parentData = parentData.parent
        index++
      }
      return false
    },
    // 清空项目树搜索框
    clearTree() {
      this.getOrganizarionTree()
    },
}