Element Plus的Table组件通过指定列表数据的children属性,实现树形数据的渲染;同时使用row-key标识唯一的行,依赖排序和子节点数据结构,以实现连动操作。
重要的设置有:
- 树形渲染配置项: 通过tree-props 配置定义树形数据结构,例如指定子节点属性名为children。
- 唯一key设置: 通过row-key 解决树形数据表的唯一标识问题。
- 如果数据是懒加载的tree-props中才需要hasChildren属性,非懒加载不用加,加了无法渲染树形结构
<el-table:data="tableData"row-key="id"borderstyle="width: 100%":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /></el-table>
父级别显示序号而子级不显示序号 的效果,可以在 el-table-column 中通过一个简单的逻辑判断来控制:
- 在序号列的插槽中判断是否为父级。
- 父级可以通过没有 children 属性或特定条件来标识。
<el-table-column label="No." width="100"><template #default="{ row, $index }"><span v-if="!row.children">{{ $index + 1 }}</span></template></el-table-column>