解决elementUI中el-tree树形结构中节点过滤的问题
作者：木屋x
这篇文章主要介绍了解决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, [])
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。