elementUI中el-tree树形结构中节点过滤问题

elementUI中el-tree树形结构中节点过滤问题

1.业务需求：

• vue项目，权限管理模块中经常遇到树形结构的处理，这篇文章我们讲一下树形结构的节点过滤问题。在权限管理中的菜单管理模块，当我们新增菜单是需要选择它的父级菜单或者目录（有这样一个需求，就是菜单下面是可以新增按钮的，所以新增按钮就需要选择它的父级菜单，菜单的父级当然只是目录），那么这里选择上级菜单或者目录时就需要对树形结构进行过滤。

2.需求分析

• 处理el-tree的树形结构过滤问题我们首先会想到遍历递归去给要过滤的节点的值置空，这样它既然是空置那么就不会被el-tree树形渲染，经过踩坑这里的答案是不行的，它虽然为空，但还是会占位显示为空。这里我使用的是el-tree控件的filter-node-method 方法进行过滤。

2.解决方案：

• 第一步是既然要过滤的节点置空不行，那么我们就给他设置一个特殊的过滤值，我用的是'undefined'，所以在递归遍历的时候就给要过滤的节点的值设置为'undefined'，然后再对树形数据进行过滤：

•          // 树形数据过滤
       	 this.$nextTick(() => {
              this.$refs.menutree.filter('undefined')
            })
  

• 第二步，当已经执行树形数据过滤之后，然后在树形组件上绑定:filter-node-method="filterNode"方法对树形结构的节点进行过滤：

•       // 树形节点过滤
        filterNode(value, data, node) {
          // if (!value) return true;
          // 当节点的data.resourcesName里面有值时展示它，否则过滤它
          if (data.resourcesName.includes(value)) {
            return false
          } else {
            return true
          }
        },