场景
有需求,使用懒加载的展开列,当加载的数据量过大,如大于1000条以上,浏览器可能卡死挂了
分析
大量的dom的渲染绘制,导致了浏览器处理不过来
解决
虚拟列表
vue-table 虚拟列表的使用
vue-table官网
<vxe-table border resizable height="100%" ref="xTree" row-id="rid" class="mytable-style":row-class-name="rowBackgroundColor" :key="JSON.stringify(columnList)":row-config="{keyField:'rid'}" show-overflow="tooltip":tree-config="{reserve:true,accordion:true,lazy: true, transform: true, rowField: 'rid', parentField: 'parentId', hasChild: 'haveMultiplePrice', loadMethod: loadChildren}":data="tableData" :scroll-y="{enabled: true,gt:20}" @checkbox-change="selectChangeEvent" @checkbox-all="selectChangeEvent"><vxe-column type="checkbox" width="40" fixed="left" align="center">