el-tree-select多选如何正确实现check-strictly模式？

Question

在使用 `el-tree-select` 实现多选时，启用 `check-strictly` 模式可以实现父子节点选择互不关联。然而，许多开发者在实际操作中发现，即使开启了该模式，仍然无法正确获取所有选中节点，或在数据回显时出现异常。常见问题包括：如何在 `check-strictly` 模式下正确获取选中值、如何处理标签回显、以及如何避免父子节点状态联动。本文将围绕这些问题展开，深入解析 `el-tree-select` 多选结合 `check-strictly` 的正确使用方式，帮助开发者实现更灵活的树形选择逻辑。

Answer 1

一、背景与基础概念

在使用 el-tree-select 实现树形结构的多选功能时，很多开发者会启用 check-strictly 模式以实现父子节点之间的选择互不关联。该模式下，选中一个父节点并不会自动选中其所有子节点，反之亦然。

然而，在实际开发中，许多开发者反馈即使开启了 check-strictly，仍然无法正确获取所有选中节点，或在数据回显时出现异常。这通常与组件的内部状态管理、数据结构设计以及事件监听机制密切相关。

二、常见问题与分析

1. 无法正确获取所有选中值
2. 数据回显时标签显示异常
3. 父子节点状态仍存在联动现象

这些问题的根源往往在于对 el-tree-select 的 getCheckedNodes 方法使用不当，或未正确维护选中状态的数据源。

三、解决方案详解

3.1 获取所有选中节点

在 check-strictly 模式下，调用 getCheckedNodes 方法时，需要传入两个参数：

• 第一个参数为 false，表示不返回半选中状态的节点
• 第二个参数为 true，表示返回所有选中的节点（包括父节点）

    const checkedNodes = this.$refs.treeSelect.getCheckedNodes(false, true);
  

3.2 数据回显处理

在数据回显时，需确保传入的 value 值与节点的 key 值一致，并且树结构已正确加载。

推荐在 mounted 生命周期钩子中调用 setCheckedKeys 方法设置选中项：

    mounted() {
      this.$refs.treeSelect.setCheckedKeys(this.selectedKeys);
    }
  

3.3 避免父子节点联动

确保 check-strictly 属性已正确设置为 true，并且不使用 check-strictly 模式下的默认父子联动逻辑。

此外，可以通过监听 check-change 事件手动管理选中状态：

    methods: {
      handleCheckChange(data, checked, indeterminate) {
        if (checked) {
          this.selectedKeys.push(data.id);
        } else {
          const index = this.selectedKeys.indexOf(data.id);
          if (index > -1) {
            this.selectedKeys.splice(index, 1);
          }
        }
      }
    }
  

四、完整示例代码

    <template>
      <el-tree-select
        ref="treeSelect"
        :data="treeData"
        node-key="id"
        check-strictly
        show-checkbox
        @check-change="handleCheckChange"
      />
    </template>

    <script>
    export default {
      data() {
        return {
          treeData: [/* 树结构数据 */],
          selectedKeys: []
        };
      },
      mounted() {
        this.$refs.treeSelect.setCheckedKeys(this.selectedKeys);
      },
      methods: {
        handleCheckChange(data, checked) {
          if (checked) {
            this.selectedKeys.push(data.id);
          } else {
            const index = this.selectedKeys.indexOf(data.id);
            if (index > -1) {
              this.selectedKeys.splice(index, 1);
            }
          }
        }
      }
    };
    </script>
  

五、流程图示意

以下是一个简单的流程图，展示在 check-strictly 模式下，如何管理选中状态：

    graph TD
      A[初始化组件] --> B{check-strictly是否启用}
      B -->|是| C[监听check-change事件]
      C --> D[手动更新selectedKeys]
      D --> E[调用setCheckedKeys设置回显]
      E --> F[获取选中值时调用getCheckedNodes]
  

graph TD A[初始化组件] --> B{check-strictly是否启用} B -->|是| C[监听check-change事件] C --> D[手动更新selectedKeys] D --> E[调用setCheckedKeys设置回显] E --> F[获取选中值时调用getCheckedNodes]

六、总结与进阶建议

在使用 el-tree-select 多选结合 check-strictly 模式时，理解组件的底层机制和事件机制至关重要。

对于大型项目，建议封装一个独立的状态管理模块来处理树形结构的选择状态，从而提升组件的复用性和可维护性。