el-tree-select 选中子集

### 实现 `el-tree-select` 组件选中子集功能

为了实现在 `el-tree-select` 中选中子集的功能，可以利用 Element Plus 的树形控件特性来完成这一需求。通过设置特定属性并编写相应的事件处理逻辑，能够有效地管理节点的选择状态。

#### 使用默认勾选行为

Element Plus 提供了内置的支持用于多选模式下的父子级联选择，默认情况下当父节点被选中时其下所有的叶子结点也会自动被打上勾号；反之如果取消勾选某个父项，则它所辖范围内的所有后代都将失去已选项标记[^1]。

<template>
  <el-tree-select v-model="value" :data="options" check-strictly show-checkbox />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)

// 定义树结构的数据源
const options = [
  {
    label: "一级 1",
    children: [{
      label: "二级 1-1",
      children: [{label:"三级 1-1-1"}],
    }],
  },
];
</script>

上述代码片段展示了如何创建一个多选框形式的树状菜单，并启用了严格的分层筛选(`check-strictly`)以防止点击任意一层时不遵循标准的全选/半选机制。

#### 自定义全选单选逻辑

对于更复杂的场景比如自定义全选或仅允许部分层级参与集体操作的情况，可以通过监听 `node-click` 和其他相关事件来自行控制哪些节点应该受到影响以及怎样影响它们的状态变化：

function handleNodeClick(data, node){
  const isChecked = !node.checked;
  
  function toggleChildrenStatus(n){
    n.childNodes.forEach(child => {
      child.setChecked(isChecked);
      if (child.isLeaf === false) toggleChildrenStatus(child); 
    });
  }

  // 对当前节点及其子孙应用新的检查状态
  data.setChecked(isChecked);
  if (!data.isLeaf) toggleChildrenStatus(node);

}

此函数接收两个参数分别是代表被触发事件的对象实例和对应的节点对象。内部定义了一个辅助性的递归过程用来遍历整个分支并将指定的新值赋给每一个成员直到最底层为止。