vue项目中解决el-table数据过多导致页面卡顿问题
需要用到umy-ui库,umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。
umy-ui官网:umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库,完美解决表格万级数据渲染卡顿问题 (umyui.com)
1. 安装:
npm install umy-ui
2. 引用:
import { UTable, UTableColumn } from 'umy-ui';Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);
3. 使用:
-
把el-table改成u-table。
-
把el-table-column改成u-table-column。
-
u-table增加三个属性(必须): use-virtual,row-height,height,表示启用虚拟列表。
<u-tableref="uTableRef":data="tableData"use-virtual:row-height="30":height="600"><u-table-column label="订单号" align="center" prop="ordersn"/>
</u-table>