ElementUI Tree组件筛选后全选，如何仅选中可见节点而非全部节点？

Question

在使用ElementUI Tree组件时，如果对树节点进行筛选（filter），然后执行全选操作，默认会选中所有节点，包括被筛选隐藏的节点。然而，实际需求中我们可能只想选中当前可见的节点。 常见问题：如何在筛选后的Tree组件中实现仅选中可见节点而非全部节点？ 解决思路：需要重写全选逻辑，结合Tree组件的`filterNodeMethod`和`visible`状态判断。首先遍历所有节点，通过`treeRef.getCheckedKeys()`获取当前选中节点，再利用递归或层级遍历检查每个节点是否处于可见状态（即未被过滤隐藏）。对于不可见节点，手动调用`treeRef.setChecked(node, false)`取消其选中状态。此外，可借助`tree.getNode(key).isHidden`来辅助判断节点可见性，确保最终只保留可见节点的选中状态。

Answer 1

1. 问题概述

在使用ElementUI Tree组件时，开发者可能会遇到一个常见问题：当对树节点进行筛选（filter）后执行全选操作时，默认逻辑会选中所有节点，包括那些被筛选隐藏的节点。然而，在实际开发需求中，我们往往希望仅选中当前可见的节点。

这个问题的核心在于如何判断节点的可见性，并根据可见性调整全选逻辑。以下将从问题分析、解决方案设计以及实现步骤等方面展开讨论。

2. 问题分析

ElementUI Tree组件提供了`filterNodeMethod`用于自定义过滤规则，同时也支持通过`setCheckedKeys`或`setChecked`方法控制节点的选中状态。然而，默认的全选逻辑并未结合过滤后的可见性状态，因此需要我们手动干预。

具体分析如下：

• Tree组件的`filter`方法会对节点应用过滤规则，导致部分节点不可见。
• `getCheckedKeys`方法获取的是所有已选中的节点，无论其是否可见。
• 全选操作默认会遍历所有节点并设置为选中状态，而不考虑节点的可见性。

基于上述分析，我们需要一种机制来区分可见与不可见节点，并在全选时排除不可见节点。

3. 解决方案设计

为了实现仅选中可见节点的功能，我们可以按照以下步骤设计解决方案：

1. 重写全选逻辑，确保只处理可见节点。
2. 利用递归或层级遍历检查每个节点的可见性。
3. 借助`tree.getNode(key).isHidden`方法辅助判断节点是否被隐藏。
4. 对于不可见节点，手动调用`treeRef.setChecked(node, false)`取消其选中状态。

以下是具体的实现步骤：

4. 实现步骤

以下是基于Vue和ElementUI的代码示例，展示如何实现仅选中可见节点的功能：

// 假设 treeRef 是 Tree 组件的实例引用
function selectVisibleNodes() {
    const tree = this.treeRef; // 获取 Tree 组件实例
    const allNodes = tree.store._getAllNodes(); // 获取所有节点
    allNodes.forEach(node => {
        if (node.isHidden) {
            tree.setChecked(node.key, false); // 取消不可见节点的选中状态
        } else {
            tree.setChecked(node.key, true); // 选中可见节点
        }
    });
}
    

此外，可以通过以下表格对比默认全选逻辑与改进后的逻辑：

逻辑类型	选中范围	适用场景
默认全选逻辑	所有节点，包括不可见节点	无需区分可见性的情况
改进后的逻辑	仅限可见节点	需要精确控制选中范围的场景

5. 流程图说明

以下是改进后全选逻辑的流程图，展示如何区分可见与不可见节点并调整选中状态：

graph TD;
            A[开始] --> B{节点是否可见};
            B --是--> C[选中该节点];
            B --否--> D[取消选中该节点];
            C --> E[处理下一个节点];
            D --> E;
            E --> F{还有未处理节点?};
            F --是--> B;
            F --否--> G[结束];

通过上述流程图可以看出，改进后的逻辑能够有效区分可见与不可见节点，并根据可见性调整选中状态。