Element Table 表格树形结构多选框选中父级时会选中子级以及禁止状态不选中

Element Table 是一种用于展示表格数据并支持树形结构的组件，常见于前端开发的框架如 Vue.js 或 React 中。当你在表格中设置成树状结构时，每个节点通常包含一个或多级子节点。当用户选择一个父节点的多选框时，该组件的特性会自动关联上，使得所有处于父节点下的子节点也被选中，这是为了体现树形结构的一致性和层次关系。

对于禁用状态，如果你希望某些节点在特定情况下不可选，可以给这些节点的多选框设置 `disabled` 属性为 `true`，这样即便它们在层级结构中，用户也无法点击选中。这可以用于对某个节点的操作权限控制或标记特殊状态。

例如，在 Vue 的 Element UI 中，你可以这样做：

<el-tree
  :data="treeData"
  node-key="id"
  default-expand-all
  :check-strictly="true" <!-- 确保严格按层级选中 -->
  @node-click="handleNodeClick"
>
  <span slot="default">{{ node.label }}</span>
  <template v-if="node.children">
    <el-tree-node v-for="child in node.children" :key="child.id" :node-data="child" />
  </template>
</el-tree>

<script>
export default {
  methods: {
    handleNodeClick(node) {
      if (node.disabled) return;
      // 如果你想同时选中父级和子级，这里可以操作 selectedKeys 或者 node.checked
      this.selectedKeys = [...this.selectedKeys, node.id]; // 如果是单选
      node.setChecked(true); // 如果是多选并且 check-strictly 为 true
    }
  },
}
</script>