el-tree筛选目标节点及所有子节点

使用el-tree时，经常碰到需要筛选出目标节点同时展示所有子节点的场景。

比如有一个年级、班级的树状结构，用户搜索了2023级，需要展示2023级下面所有班级。

 

以下是最简单的实现代码，只写了筛选方法

filterMethod(value, data, node) {
    if(!value) return true;

    // 首先筛选目标节点，打上filterFlag来区分是否要显示该节点
    data.filterFlag = data.label.includes(value);
    
    // 然后给子节点赋上父节点的filterFlag
    // 加上!data.filterFlag判断是为了防止上一行执行完了再进来重复执行
    if(!data.filterFlag && node.level > 1) {
        data.filterFlag = node.parent.data.filterFlag;
    }
    return data.filterFlag
}

效果对比

 左侧是框架自带筛选效果，右侧本文实现效果