el-table 树形数据勾选

### el-table 树形数据勾选实现方式

对于 `el-table` 的树形数据显示与勾选功能，Element Plus 提供了一套完整的解决方案来处理复杂的数据结构。为了使表格能够展示并操作树状层次关系的数据，需设置特定属性。

#### 属性配置

- **row-key**: 设置每一行唯一标识符字段名，用于识别节点间的父子关系[^1]。

- **tree-props**: 定义子级 children 字段名称，默认为 "children"。

- **default-expand-all**: 是否默认展开所有行，适用于初次加载时全部显示细节信息。

- **show-checkbox**: 显示多选框列，允许用户选择多个条目。

当涉及到树形数据的选择逻辑时，还需要考虑父节点与其子节点之间的联动效果：

- 如果希望父节点被选中则自动全选其下所有的子孙节点，则可以监听 `selection-change` 事件，在回调函数内遍历当前选中的项，并手动调用 `toggleRowSelection(row, selected)` 来控制关联节点的状态变化。

下面是一个简单的例子展示了如何创建带有复选框的可扩展树表单：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      default-expand-all
      show-checkbox
      @selection-change="handleSelectionChange">
      <!-- 列定义 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      ...
    </el-table>
  </div>
</template>

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

const tableData = [
  {
    id: 1,
    name: 'Parent Node',
    children: [{ id: 2, name: 'Child Node' }]
  }
];

function handleSelectionChange(selection) {
  console.log('Selected:', selection);
}
</script>

此代码片段实现了基本的功能需求，即通过指定 `row-key`, `tree-props` 及其他必要参数让 `el-table` 支持树型结构的同时提供复选项让用户可以选择任意数量的记录；并通过自定义的方法响应用户的交互行为，如点击某一行前面的小方块触发整个分支或者仅该叶子结点的选取状态改变。