树形表格
当你的数据天然带有父子层级时,应该使用树形表格,而不是展开行。树形表格会基于 childrenColumnName、缩进宽度和展开状态来管理多级节点的展示方式。
基础示例
vue
<VTable
row-key="key"
:columns="columns"
:data-source="treeData"
children-column-name="children"
:indent-size="20"
/>常用控制项
childrenColumnName指定子节点字段名indentSize控制层级缩进宽度defaultExpandedRowKeys设置默认展开节点expandedRowKeys改成完全受控的展开状态rowSelection.checkStrictly控制父子选择是否联动
什么时候用
- 数据本身有父子层级,而不是附加详情
- 你需要统一处理节点展开、缩进和父子选择关系
- 页面里既有树结构,又希望保留普通表格的列定义和交互方式
已知限制
- 不支持懒加载:当前没有提供
loadData等按需加载子节点的能力,所有子节点数据必须预先放在dataSource中。如果数据量较大,建议在业务层自行拉取完整树结构后再传入。