element-ui树形表格层级选择

### 关于 Element-UI 树形表格层级选择的使用方法 #### 实现树形表格的基础结构 为了创建一个具有层级关系的树形表格，可以利用 `el-table` 和其属性 `row-key` 及 `tree-props` 来定义父子节点的关系。以下是基础代码示例： ```html <template> <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, date: '2023-09-01', name: '张三', address: '北京市朝阳区', children: [ { id: 2, date: '2023-09-02', name: '李四', address: '上海市浦东新区' } ] }, { id: 3, date: '2023-09-03', name: '王五', address: '广州市天河区', hasChildren: true } ] }; } }; </script> ``` 此代码展示了如何通过 `children` 字段表示子节点，并通过 `hasChildren` 表明某项可能有未加载的子节点[^4]。 --- #### 添加复选框功能 如果希望在树形表格中加入复选框以支持层级选择，则可以通过 `el-table-column` 的 `type="selection"` 属性实现。需要注意的是，当启用复选框时，默认行为不会自动同步父节点和子节点的选择状态。因此需要手动编写逻辑来维护这种关联性。 下面是一个带有复选框的树形表格实例： ```html <template> <div> <el-table ref="multipleTable" :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, date: '2023-09-01', name: '张三', address: '北京市朝阳区', children: [ { id: 2, date: '2023-09-02', name: '李四', address: '上海市浦东新区' } ] }, { id: 3, date: '2023-09-03', name: '王五', address: '广州市天河区', hasChildren: true } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; // 自动更新父节点/子节点的选择状态 (可选) const updateParentState = () => {}; const updateChildState = () => {}; } } }; </script> ``` 在此基础上，还需要额外处理父节点与子节点之间的联动逻辑[^3]。 --- #### 处理父节点与子节点的联动 为了让父节点和子节点之间形成有效的联动效果（即勾选某个节点会自动影响它的所有后代或者祖先），可以借助递归函数完成这一需求。以下是一个简单的实现思路： ```javascript methods: { toggleRowSelection(row, isSelected) { this.$refs.multipleTable.toggleRowSelection(row, isSelected); if (isSelected && row.children) { row.children.forEach(child => this.toggleRowSelection(child, true)); } else if (!isSelected && row.parent) { this.updateParentSelection(row.parent); } function updateParentSelection(parentNode) { let allChecked = parentNode.children.every(child => this.isSelected(child.id) ); this.$refs.multipleTable.toggleRowSelection(parentNode, allChecked); if (parentNode.parent) { this.updateParentSelection(parentNode.parent); } }, isSelected(id) { return !!this.selectedRows.find(row => row.id === id); } } ``` 以上代码片段实现了两个主要功能：一是向下传播选定状态；二是向上回溯并调整父节点的状态[^3]。 --- ### 总结 Element-UI 提供了灵活的方式来构建树形表格以及相应的交互机制。然而，在实际开发过程中，开发者往往需要针对具体业务场景自定义某些细节，比如父子节点间的相互作用规则等。