渲染树形数据时,必须要指定 row-key和isTreeTable属性, row 中包含 children字段(必须不然展开收起会有问题)。
支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
children 与 hasChildren 都可以通过 tree-props 配置。
大数据滚动渲染需指定isBigData属性,支持树形表格大数据.
其它用法和elment-ui的table组件一样
需要设置height,例如height=‘500’(否则到底部时,超过数据数量超过renderSize时,不会自动加载)
npm i vbt-table
import { vbtTable, vbtTableColumn } from 'vbt-table'
components: { vbtTable, vbtTableColumn },
<vbt-table
:data="menuList">
:tree-props="{children: 'subMenus', hasChildren: 'hasChildren'}"
row-key="menuId"
width="100%"
:isTreeTable='true'
:isBigData="true"
:scrollYRenderConfig="{
renderSize: 60,
offsetSize: 10
}"
<vbt-table-column :show-overflow-tooltip="true" label="菜单名称" width="225px" prop="menuName" />
</vbt-table>
网友评论