当前位置: 首页 > article >正文

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. 使用:

  1. 把el-table改成u-table。

  2. 把el-table-column改成u-table-column。

  3. 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>

http://www.kler.cn/a/282699.html

相关文章:

  • ADC输出码和输入电压转换关系
  • 《Probing the 3D Awareness of Visual Foundation Models》论文解析——多视图一致性
  • 通过Python 调整Excel行高、列宽
  • opc da 服务器数据 转 IEC61850项目案例
  • redis7.x源码分析:(1) sds动态字符串
  • 基于Java Web的传智播客crm企业管理系统的设计与实现
  • 学习系列三:V8目标检测与分割自动化标注
  • 数据库不停机迁移方案
  • 【SpringCloud Alibaba】(九)学习 Gateway 服务网关
  • Golang 教程2
  • 工作 6 年,@Transactional 注解用的一塌糊涂
  • 空间计量 | 空间杜宾误差模型SDEM
  • 基于RK3568平台opencv的图像采集、ffmpeg推流和Windows端拉流(多线程)
  • 新手教学系列——如何实现基于asyncio的高效率 Worker(按需获取任务、防止阻塞与崩溃)
  • 时序预测 | 基于WTC+transformer时间序列组合预测模型(pytorch)
  • 【河北航空-注册安全分析报告-无验证方式导致安全隐患】
  • 图像处理领域的术语解析
  • 【Rust练习】10.元组
  • 【数据结构篇】~链式二叉树(附源码)
  • 两个主机上的Docker容器怎么实现连接
  • 新买的笔记本只有一个C盘,进行磁盘分区的操作
  • 机器人大会引领产业动向,卓翼飞思绘制无人系统教科研新蓝图
  • SpringBoot依赖之PostgreSQL Driver集成
  • Docker搭建 Nexus Maven 私有仓库教程
  • ffmpeg教程及加速视频转码
  • 履带式森林消防车的功能和应用_鼎跃安全