el-table使用树形结构,数据较大,渲染和展开卡顿

渲染树形数据时,必须要指定 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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容