解决el-table表格数据量过大导致页面卡顿问题 又名《umy-ui---虚拟表格仅渲染可视区域dom的神》

后台管理系统的某个页面需要展示多个列表 数据量过多 页面渲染dom卡顿

经调研发现两个组件 pl-table和umy-ui (也就是u-table)

最终决定使用umy-ui 它是专门基于 Vue 2.0 的桌面端组件库 流畅渲染表格万级数据

而且他是对element-ui的表格做了二次优化 可以支持el-table的所有方法

官网:http://www.umyui.com/

npm 安装

npm install umy-ui

全局引入 main.js里

  import UmyUi from 'umy-ui'import 'umy-ui/lib/theme-chalk/index.css';// 引入样式Vue.use(UmyUi);

或者按需引入(例如只引入表格部分组件)

import { UTable, UTableColumn } from 'umy-ui';

component里注册

component {UTable,UTableColumn
}

<el-table>标签上加三个属性  :row-height="rowHeight"  :height="tableHeight" use-virtual

然后将所有<el-table 替换为 <u-table
<el-table-column  替换为 <u-table-column
</el-table-column>  替换为 </u-table-column>

data里给默认值

data() {return {rowHeight: 55,tableHeight: 500}
}

这里需要注意 height是必须给的 否则虚拟滚动会失效

另外还有个vxe-table 更厉害!

官网:Vxe Table v4

企业版的能像excel那样复制粘贴还能渲染图表

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892525.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单元测试概述入门

引入 什么是测试&#xff1f;测试的阶段划分&#xff1f; 测试方法有哪些&#xff1f; 1.什么是单元测试&#xff1f; 单元测试&#xff1a;就是针对最小的功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其正确性进行测试。 2.为什么要引入单元测试&#x…

Xcode 正则表达式实现查找替换

在软件开发过程中&#xff0c;查找和替换文本是一项常见的任务。正则表达式&#xff08;Regular Expressions&#xff09;是一种强大的工具&#xff0c;可以帮助我们在复杂的文本中进行精确的匹配和替换。Xcode 作为一款流行的开发工具&#xff0c;提供了对正则表达式的支持。本…

基于微信小程序的电影交流平台设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

全网首发:编译libssh,产生类似undefined reference to `EVP_aes_256_ctr@OPENSSL_1_1_0‘的大量错误

具体错误 前面和后面的&#xff1a; /opt/linux/x86-arm/aarch64-mix210-linux/host_bin/../lib/gcc/aarch64-linux-gnu/7.3.0/../../../../aarch64-linux-gnu/bin/ld: warning: libcrypto.so.1.1, needed by ../lib/libssh.so.4.10.1, not found (try using -rpath or -rpat…

GAMES101学习笔记(三):Rasterization 光栅化(三角形的离散化、抗锯齿、深度测试)

文章目录 视口变换 Viewport三角形网格 Triangle Mesh采样 Sampling走样/反走样 Aliasing/Antialiasing采样频率、空间域与频率域深入理解采样、走样、反走样反走样总结深度测试 Depth testing 课程资源&#xff1a;GAMES101-现代计算机图形学入门-闫令琪 Lec5 ~ Lec6 学习笔记…

PythonOpenCV图片识别

在windows下面&#xff0c;使用python opencv 进行识别&#xff0c;获取到坐标。 依赖安装&#xff1a; pip install opencv-python pip install numpy pip install pyautogui pip install pywin32代码&#xff1a; import cv2 import numpy as np import pyautogui import o…

《分布式光纤传感:架设于桥梁监测领域的 “智慧光网” 》

桥梁作为交通基础设施的重要组成部分&#xff0c;其结构健康状况直接关系到交通运输的安全和畅通。随着桥梁建设规模的不断扩大和服役年限的增长&#xff0c;桥梁结构的安全隐患日益凸显&#xff0c;传统的监测方法已难以满足对桥梁结构健康实时、全面、准确监测的需求。分布式…

BUUCTF:web刷题记录(1)

目录 [极客大挑战 2019]EasySQL1 [极客大挑战 2019]Havefun1 [极客大挑战 2019]EasySQL1 根据题目以及页面内容&#xff0c;这是一个sql注入的题目。 直接就套用万能密码试试。 admin or 1 # 轻松拿到flag 换种方式也可以轻松拿到flag 我们再看一下网页源码 这段 HTML 代码…

腾讯云AI代码助手编程挑战赛-知识百科AI

作品简介 知识百科AI这一编程主要用于对于小朋友的探索力的开发&#xff0c;让小朋友在一开始就对学习具有探索精神。在信息化时代下&#xff0c;会主动去学习自己认知以外的知识&#xff0c;同时丰富了眼界&#xff0c;开拓了新的知识。同时催生了在大数据时代下的信息共享化…

大语言模型预训练、微调、RLHF

转发&#xff0c;如有侵权&#xff0c;请联系删除&#xff1a; 1.【LLM】3&#xff1a;从零开始训练大语言模型&#xff08;预训练、微调、RLHF&#xff09; 2.老婆饼里没有老婆&#xff0c;RLHF里也没有真正的RL 3.【大模型微调】一文掌握7种大模型微调的方法 4.基于 Qwen2.…

【理论】测试框架体系TDD、BDD、ATDD、MBT、DDT介绍

一、测试框架是什么 测试框架是一组用于创建和设计测试用例的指南或规则。框架由旨在帮助 QA 专业人员更有效地测试的实践和工具的组合组成。 这些指南可能包括编码标准、测试数据处理方法、对象存储库、存储测试结果的过程或有关如何访问外部资源的信息。 A testing framewo…

【网络云SRE运维开发】2025第2周-每日【2025/01/12】小测-【第12章 rip路由协议】理论和实操考试题

文章目录 选择题理论题 解释RIP协议中的“水平分割”机制&#xff0c;并说明其目的。 可以防止路由器错误地将从邻居学到的路由再发送回给该邻居&#xff0c;从而避免路由环路的发生。实操题 【网络云SRE运维开发】2025第2周-每日【2025/01/12】小测-【第12章 rip路由协议】理论…

20250112面试鸭特训营第20天

更多特训营笔记详见个人主页【面试鸭特训营】专栏 250112 1. TCP 和 UDP 有什么区别&#xff1f; 特性TCPUDP连接方式面向连接&#xff08;需要建立连接&#xff09;无连接&#xff08;无需建立连接&#xff09;可靠性可靠的&#xff0c;提供确认、重传机制不可靠&#xff0c…

SQL Server查询计划操作符——查询计划相关操作符(3)

7.3. 查询计划相关操作符 19)Collapse:该操作符对更改处理进行优化。当执行一个更改时,其能被劈成(用Split操作符)一个删除和一个插入。其参数列包含一个确定一系列键值字段的GROUP BY:()子句。如果查询处理器遇到删除和插入相同键值的毗邻行,其将用一个更高效的更改操作…

【IO编程】空洞文件

空洞文件&#xff08;Sparse File&#xff09; 是一种特殊类型的文件&#xff0c;它允许在文件中创建“空洞”&#xff08;即未分配实际存储空间的区域&#xff09;。这些空洞在逻辑上表现为零字节&#xff0c;而实际上并未占用磁盘存储空间。空洞文件的作用在于数据库、日志文…

linux--防火墙 iptables 双网卡 NAT 桥接

linux--防火墙 iptables 双网卡 NAT 桥接 1 介绍1.1 概述1.2 iptables 的结构 2 四表五链2.1 iptables 的四表filter 表&#xff1a;过滤规则表&#xff0c;默认表。nat 表&#xff1a;地址转换表。mangle 表&#xff1a;修改数据包内容。raw 表&#xff1a;原始数据包表。 2.2…

oracle闪回表

文章目录 闪回表案例1&#xff1a;&#xff08;未清理回收站时的闪回表--成功&#xff09;案例2&#xff08;清理回收站时的闪回表--失败&#xff09;案例3&#xff1a;彻底删除表&#xff08;不经过回收站--失败&#xff09;案例4&#xff1a;闪回表之后重新命名新表总结1、删…

Unity编程与游戏开发-编程与游戏开发的关系

游戏开发是一个复杂的多领域合作过程,涵盖了从创意构思到最终实现的多个方面。在这个过程中,技术、设计与美术三大核心要素相互交织,缺一不可。在游戏开发的过程中,Unity作为一款强大的跨平台游戏引擎,凭借其高效的开发工具和庞大的社区支持,成为了很多游戏开发者的首选工…

202506读书笔记|《飞花令·江》——余霞散成绮,澄江静如练,江梅一夜落红雪,便有夭桃无数开

202506读书笔记|《飞花令江》——余霞散成绮&#xff0c;澄江静如练&#xff0c;江梅一夜落红雪&#xff0c;便有夭桃无数开 摘录 《飞花令江》素心落雪编著&#xff0c;飞花令得名于唐代诗人韩翃《寒食》中的名句“春城无处不飞花”&#xff0c;类似于行酒令&#xff0c;是文人…

Android 13 framework方法通过AIDL方式供三方APP使用

增加接口服务供外部调用diff --git a/frameworks/base/core/api/current.txt b/frameworks/base/core/api/current.txt index 6eeeb7dcb5..2b6445eed8 100644 --- a/frameworks/base/core/api/current.txtb/frameworks/base/core/api/current.txt-4590,6 4590,14 package andr…