vue项目中解决el-table数据过多导致页面卡顿问题

要用到umy-ui库，umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。u-table增加三个属性(必须)： use-virtual，row-height，height，表示启用虚拟列表。把el-table-column改成u-table-column。把el-table改成u-table。

m0_67460846

2110人浏览 · 2024-08-29 15:33:01

m0_67460846 · 2024-08-29 15:33:01 发布

需要用到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>