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

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

作者: sunowter | 来源:发表于2024-04-15 18:23 被阅读0次

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/yiidxjtx.html