el-tree筛选搜索父节点中的关键字会过滤掉不含关键字的子节点的解决方法-CSDN博客

本文链接：https://blog.csdn.net/zongmaomx/article/details/108577175

本文探讨了在没有后端接口支持的情况下，如何利用el-tree组件的filter功能进行精确搜索，包括解决仅父节点匹配的问题及多选时的节点筛选逻辑，确保显示的节点中获取勾选节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

需要一个搜索功能，后端没有给接口，就是用el-tree组件自带的filter过滤方法

但发现如果搜索的关键字只在父节点中而子节点中没有，会把子节点过滤掉不显示，比如搜索上方的“甪棉锦港泵站”

如图，它所包含的子节点全部没有了，这肯定不是我们要的效果

在过滤方法中添加判断方法，判断节点是不是属于已经符合的父节点的子节点，是的话，也返回true即可

//筛选节点
        filterNode(value, data,node) {
            if (!value) {
                node.expanded = false;
                return true;
            }
            // return data.name.indexOf(value) !== -1;
            return this.checkBelongToChooseNode(value, data, node);
        },

// 判断传入的节点是不是选中节点的子节点
        checkBelongToChooseNode(value, data, node) {
            if (data.name.indexOf(value) !== -1){
                return true;
            }
            const level = node.level;
            // 如果传入的节点本身就是一级节点就不用校验了
            if (level === 1) {
                return false;
            }
            // 先取当前节点的父节点
            let parentData = node.parent;
            // 遍历当前节点的父节点
            let index = 0;
            while (index < level - 1) {
                // 如果匹配到直接返回
                if (parentData.data.name.indexOf(value) != -1) {
                    return true;
                }
                // 否则的话再往上一层做匹配
                parentData = parentData.parent;
                index ++;
            }
            // 没匹配到返回false
            return false;
        },

但是这时又会出现一个问题，如果是多选时，需要用到el-tree的getCheckedNodes()方法时，虽然被过滤掉的节点不显示，但是如果是勾选状态的，还是会返回回来。我们想要的结果肯定是在显示的节点中获取选择的。

我的思路是定义一个allNodeInfo对象，只要上面过滤方法返回true的节点，通通以code（此处以实际使用的属性）作为key，true作为value添加到allNodeInfo中，然后获取勾选节点后再判断在不在此对象中即可获取到显示的节点中的勾选节点。

记得在监听filterText变化时把allNodeInfo重置。