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-table
ref="uTableRef"
:data="tableData"
use-virtual
:row-height="30"
:height="600"
>
<u-table-column label="订单号" align="center" prop="ordersn"/>
</u-table>