el-table父子嵌套

### 实现 el-table 父子嵌套表格 在 `el-table` 中实现父子嵌套表格主要依赖于特定的数据结构以及配置项的支持。为了展示树形结构中的数据，需确保每一行记录不仅包含自身的字段信息还应具备表示层级关系的关键属性。 对于每一个节点而言，在其对象内部应当存在一个名为 `children` 的数组来存储该节点下的所有子级条目[^1]： ```json { "id": 1, "name": "Parent Node", "children": [ { "id": 2, "name": "Child Node" } ] } ``` 当构建具有层次感的表格视图时，除了定义好上述提到的数据模型外，还需要设置 `el-table-column` 下的相关参数以适应这种特殊的布局需求。特别是要启用 `show-overflow-tooltip="true"` 属性以便更好地处理过长文字溢出的情况；另外通过自定义列模板可以进一步增强用户体验，比如利用作用域插槽（scope slot）来自由控制单元格内的显示逻辑[^2]。 针对更复杂的交互场景——如复选框的选择操作，则可以通过监听事件并结合计算属性或者方法来进行状态管理。具体来说就是在父组件层面维护一份被选中项目的集合，并根据用户的实际行为更新这份列表的内容。与此同时，还需注意保持各层之间的关联性，即当选定某个上级单位时自动将其下辖的所有成员纳入到当前批次之中反之亦然[^3]。 #### 完整示例代码如下所示: ```html <template> <div class="app-container"> <!-- 表头全选 --> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <!-- 数据表单 --> <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" row-key="id" default-expand-all border lazy load="load"> <!-- 复选框 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 名称 --> <el-table-column prop="date" label="日期" sortable></el-table-column> <!-- 更多其他列 --> </el-table> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; const tableData = reactive([ { id: 1, date: '2016-05-02', name: 'Tom', children: [ { id: 2, date: '2017-08-09', name: 'Jerry' }, // More child nodes... ], }, ]); // ...其余业务逻辑函数... </script> ```