elementUI中el-tree树形结构中节点过滤问题怎么解决

今天小编给大家分享一下elementUI中el-tree树形结构中节点过滤问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

业务需求

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

需求分析

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

这里我使用的是el-tree控件的filter-node-method 方法进行过滤。

解决方案

第一步是既然要过滤的节点置空不行，那么我们就给他设置一个特殊的过滤值，我用的是'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
        }
      },

el-tree树形踩坑

需求：el-tree节点需要传选中的父级菜单给后台，而不是仅仅子节点。

比如说下方需要将系统管理的节点id也传过给后台。

处理方法

实现：简单，通过getCheckedNodes()即可，但是需要定义后面的参数半选节点为true

遍历拿到id

 let chooseArr = this.$refs.meauTree.getCheckedNodes(false,true);
 let idList = []
 chooseArr.forEach(item=>{
    idList.push(item.id);
 })

普通需求应该getCheckedKeys即可满足。

 let chooseArr = this.$refs.meauTree.getCheckedKeys();

回显菜单

问题来了，回显菜单的时候，后台返回的是包含父节点的id,于是需要过滤处理。

方法：

遍历el-tree数据，看是否有子节点，没有子节点则存下id

 resolveAllEunuchNodeId(json, idArr, temp) {
      for (let i = 0; i < json.length; i++) {
        const item = json[i]
        // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
        if (item.children && item.children.length !== 0) {
          this.resolveAllEunuchNodeId(item.children, idArr, temp)
        } else {
          temp.push(idArr.filter(id => id === item.id))
        }
      }
      return temp
    }

使用：

• menuData树形结构数据 

• menuIds后台拿到的包含所有半选的节点id数组

 // 解析出所有的太监节点
this.menuIdList = this.resolveAllEunuchNodeId(this.menuData, menuIds, [])

以上就是“elementUI中el-tree树形结构中节点过滤问题怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。