vxe-table 虚拟滚动的动态响应
虚拟滚动主要是在有限范围内渲染想要显示的数据,主要体现在懒加载数据和动态渲染上。如何提高虚拟滚动的操作性呢?请看本章解析
1.什么是虚拟滚动?代码如何实现?
VXE-Table提供了一种名为“虚拟滚动”的功能,该功能可以处理大量数据的渲染,避免了 DOM 元素过多导致的性能问题(最大可以支撑 5w 列、30w 行)。
在模板中使用 标签,并设置scroll-y(纵向)/scroll-x(横向)中的enabled属性为 true(ture为开启,false为关闭,默认为关闭)。
设置 height 属性以限制表格的高度。
设置 row-height 属性以指定每行的高度。
<vxe-tableborderheight="200" //表格的高度row-height="50" //行的高度:scroll-y="{enabled: true}" //开启纵向虚拟滚动:data="tableData"><vxe-column type="seq" width="100"></vxe-column><vxe-column field="name" title="Name" sortable></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table>
提示:
启用虚拟滚动后:show-overflow,show-header-overflow,show-footer-overflow 参数将根据不同场景各自触发生效,无法取消;如果需要支持,需将虚拟滚动关闭
性能优化:横向虚拟滚动由列宽决定性能,每一列的列宽越大就越流畅;纵向虚拟滚动由行高决定性能,每一行的高度越高就越流畅
2.滚动条定位
“虚拟滚动”的本质是动态渲染,所以如果想操作未渲染的自定义组件时,就需要将其跳转到响应的单元格位置,否则无法获取到未渲染数据行的id或者ref等各种信息,也就自然无法进行响应。所以滚动条定位就是单元格中自定义组件动态响应的前提。
首先需要为了访问vxe-table的DOM,需要定义一个ref
<vxe-tableborderref="xTable" //设置指向vxe-table的引用height="200" //表格的高度row-height="50" //行的高度:scroll-y="{enabled: true}" //开启纵向虚拟滚动:data="tableData"><vxe-column type="seq" width="100"></vxe-column><vxe-column field="name" title="Name" sortable></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table>
然后在需要进行滚动条定位的地方加上如下代码
setTimeout(() => {// x:是期望滚动到位置水平轴上距元素左上角的像素。// y:是期望滚动到位置竖直轴上距元素左上角的像素。// 回到滚动条顶端的代码就是 this.$refs.xTable.scrollTo(0, 0)// 跳转到第20行的代码就是 this.$refs.xTable.scrollTo(0, 行高 * 20)this.$refs.xTable.scrollTo(x, y)}, 50)
提示:如果想要操作的数据行不在虚拟滚动队列(画面上显示的数据只是虚拟滚动队列里的一部分)里,是不会被渲染的。所以无法获取对应的DOM。
例如:画面上显示了1到5行,虚拟滚动队列里是1到8行。当你想要更改第20行时,需要先跳转到第20行,不然无法更改第二十行的样式等元素。
注:this.$refs.xTable.getTableData()可以查看目前的虚拟滚动队列
3.对单元格中的组件进行样式变更
如果想在单元格中对自定义的组件进行动态响应,例如焦点聚焦,更改样式等。就必须要在滚动条定位是动态响应的前提下进行。
首先在单元格中自定义一个input控件,并为其创建动态ref。
<vxe-tableborderref="xTable" //设置指向vxe-table的引用height="200" //表格的高度row-height="50" //行的高度:scroll-y="{enabled: true}" //开启纵向虚拟滚动:edit-config="{trigger: 'click', mode: 'cell', showIcon: false}"//单击可编辑单元格:data="tableData"><vxe-column field="name" title="Name" width="260" ><template #default="{ row, rowIndex }"><div><input:ref="'name'+rowIndex"//动态reftabindex="0"v-model="row.name"type="text"maxlength="17"//最大入力17位></div></template></vxe-column></vxe-table>
在想要实现动态响应的地方添加如下代码
setTimeout(() => {this.$refs.xTable.scrollTo(0, 行高 * 响应行)//滚动条跳转到响应行}, 50)setTimeout(() => {this.$refs['name' + 响应行].focus()//焦点落在相应行的input控件上this.$refs['name' + 响应行].style.backgroundColor = '#fcd4d4'//input控件背景变红}, 100)//例如 行高20的表格,想要让第110行的name单元格动态响应,代码如下setTimeout(() => {this.$refs.xTable.scrollTo(0, 20* 110)}, 50)setTimeout(() => {this.$refs['name' + 110].focus()this.$refs['name' + 110].style.backgroundColor = '#fcd4d4'}, 100)
4.虚拟样式缓存
与上述2和3不同的是,vxe-table中自带的方法可以不用担心虚拟滚动导致无法更改样式,vxe-table会在方法施行时对样式进行虚拟缓存,当渲染时默认渲染最新样式。拿单元格改色做例子。
引入更改单元格样式的方法
<vxe-tableborderref="xTable" //设置指向vxe-table的引用height="200" //表格的高度row-height="50" //行的高度:cell-style="tableCellStyle" // 调用单元格样式动态响应的方法:scroll-y="{enabled: true}" //开启纵向虚拟滚动:data="tableData"><vxe-column type="seq" width="100"></vxe-column><vxe-column field="name" title="Name" sortable></vxe-column><vxe-column field="sex" title="Sex"></vxe-column><vxe-column field="age" title="Age"></vxe-column><vxe-column field="address" title="Address" show-overflow></vxe-column></vxe-table>
在tableCellStyle方法中实现动态样式
// rowIndex 当前行数// column 列集合tableCellStyle ({ rowIndex, column}) {let rowStyle = {}rowStyle.backgroundColor = '#fff !important'// 单元格背景默认为白色if (column.field === 'name' && rowIndex === 20) { // 如果是第20行的name列单元格rowStyle.backgroundColor = '#fcd4d4 !important'// 单元格背景为红色} return rowStyle},
相关文章:
vxe-table 虚拟滚动的动态响应
虚拟滚动主要是在有限范围内渲染想要显示的数据,主要体现在懒加载数据和动态渲染上。如何提高虚拟滚动的操作性呢?请看本章解析 1.什么是虚拟滚动?代码如何实现? VXE-Table提供了一种名为“虚拟滚动”的功能,该功能可…...
quasar dev 命令卡住很久
别以为这是一个瞬间的截图,其实停留在这里很久很久。 折腾挺久,无论npm run dev:proxy还是 quasar dev,都是一样的情况。 最终解决办法: 有语法问题,通过 quasar build 命令暴露出来错误所在的行数。...
黑盒RCE测试 异或测试
前言 了解了漏洞的原理之后就需要知道 他在哪能出现 并且被利用 这个还是很重要的 异或测试 使用异或(XOR)运算进行加密解密的原理_异或加密-CSDN博客 异或测试是在 白盒内执行的 一个例题看一下 输入什么都是会报错 这种情况就需要使用 异或计…...
kotlin中泛型中in和out的区别
概念含义 in关键字(逆变) 在Kotlin泛型中,in关键字主要用于定义逆变(Contravariance)。它表示一个泛型类型参数可以是指定类型或者它的超类型。简单来说,就是对于类型A和B,如果A是B的子类型&…...
c# iis 解决跨域问题
该错误是一个典型的跨域问题,说明从 http://www.fuc.com 发起的请求被目标服务器(https://aip.baidubce.com)拒绝,原因是目标服务器未返回正确的 AccessControlAllowOrigin 响应头。 解决方法 1. 了解问题的本质 CORS(…...
MySQL版本对应的mysql-connector-java版本下载地址
MySQL版本mysql-connector-java版本mysql-connector-java下载地址MySQL安装版下载地址MySQL免安装版下载地址5.1.x5.1.xmysql-connector-java 5.1.xMySQL Installer 5.1.xMySQL Community Server 5.1.x5.5.x5.1.x, 5.5.x mysql-connector-java 5.1.x, mysql-connector-java 5.5…...
【读书笔记】《论语别裁》爱与罪
一、内容摘要 《论语别裁》第01章讨论了孔子关于孝悌的思想,以及其在中国文化中的重要性和复杂性。文中引用了有子的观点,强调孝弟是为人之本。然而,随着历史的发展,孔子的思想也被误解或被用作维护专制统治的工具。通过司马迁的…...
uniApp上传文件踩坑日记
最近在做移动端app,开始接触uniapp。想着直接用PC端的前后端API去做文件上传,但是uniapp的底层把请求拆成了普通请求和文件上传请求,所以不能用一个axios去做所有请求的处理,拆成uni.request和uni.uploadFile去分别处理两种情况。…...
Webhook 是什么?详解其工作原理
在现代技术中,一切都相互连接,每个应用程序通过许多服务的组合和协调实现无缝工作。这种协调是通过 webhooks 实现的。 Webhooks 是基于 HTTP 的回调函数,其中一个服务使用 API 立即通知另一个服务发生的事件。这就是简单的版本。从技术上讲…...
log4j2漏洞复现(CVE-2021-44228)
靶场环境 步骤一:设置出战规则 步骤二:开启靶场 cd vulhub cd log4j cd CVE-2021-44228 docker-compose up -d docker ps 访问端口 靶机开启 步骤三:外带注入 获得dnslog 靶机访问dnslog 得到dnslog的二级域名信息 步骤四:构造…...
tcpdump抓包分析
使用tcpdump进行抓包分析是一个常见的网络诊断和分析任务。以下是如何使用tcpdump进行抓包和分析的一些基本步骤和技巧: 1. 基本抓包 首先,你需要确定要抓取数据包的网络接口。可以使用ifconfig或ip addr命令查看网络接口。然后,使用以下命…...
LearnOpenGL学习(碰撞检测,粒子)
完整代码见:zaizai77/OpenGLTo2DGame: 基于OpenGL制作2D游戏 物体本身的数据来检测碰撞会很复杂,一半使用重叠在物体上的更简单的外形来检测。 AABB - AABB 碰撞 AABB代表的是轴对齐碰撞箱(Axis-aligned Bounding Box),碰撞箱是指与场景基…...
操作系统(24)提高磁盘I/O速度的途径
前言 操作系统提高磁盘I/O速度的途径多种多样,这些途径旨在减少磁盘访问的延迟和开销,提高数据传输的效率。 一、磁盘高速缓存(Disk Cache) 磁盘高速缓存是一种在内存中为磁盘数据设置的缓冲区,用于存储磁盘中某些盘块…...
C/C++基础知识复习(45)
1) C 中面向对象编程如何实现数据隐藏? 在 C 中,数据隐藏是通过将类的成员变量和方法的访问权限控制起来实现的。通常,数据隐藏是通过使用 访问控制 机制来实现的,C 提供了三种访问控制修饰符: private: 使成员变量和…...
现代C++锁介绍
文章目录 场景描述🐞 初始实现: 非线程安全版本互斥锁: std::mutex使用mutex保护共享资源使用std::lock_guard简化锁的管理 优化读操作: std::shared_mutex多个锁的管理: std::scoped_lock使用std::scoped_lock避免死锁 其他高级锁⏳ 带超时的锁: std::timed_mutex使…...
Squid代理服务器的安装使用
1.简介 Squid代理服务器是一种高效的中间服务器,位于客户端和目标服务器之间,起到了重要的网络中介作用。以下是对Squid代理服务器的详细介绍: 一、功能特点 缓存功能: Squid可以缓存经过它的请求和响应数据。当客户端发起请求时…...
爬虫学习案例8
爬取京东评论信息 采用DrissionPage自动化工具采集,感觉比Selenium工具好,真香。 安装第三方库 pip install DrissionPage pip install pandas pip install pyecharts pip install jieba pip install wordcloud1.安装DrissionPage库 DrissionPage安装…...
深入了解 CouchDB 的 Mango 查询:操作符和限制
CouchDB 是一个基于文档的数据库管理系统,支持 HTTP 协议,拥有强大的同步机制和灵活的数据模型。Mango 查询是 CouchDB 中用于数据检索的现代化查询接口,灵感来自 MongoDB 的查询语法。本文将深入探讨 Mango 查询中的各种操作符和限制,并提供详细的例子和说明,帮助你更好地…...
基于SSM(Spring + Spring MVC + MyBatis)框架搭建一个病人跟踪信息管理系统
基于SSM(Spring Spring MVC MyBatis)框架搭建一个病人治疗跟踪信息系统是一个相对复杂的项目,涉及到多个模块和功能。以下是一个简要的指导步骤。 1. 环境准备 开发环境:确保安装了Java Development Kit (JDK),建议…...
U盘文件名变乱码:原因、恢复与预防全解析
一、U盘文件名变乱码现象描述 在日常使用U盘进行数据传输和存储时,我们有时会遇到一个令人头疼的问题:U盘中的文件名突然变成了乱码,无法正常识别或访问。这些乱码文件名可能包含各种奇怪的字符和符号,使得原本有序的文件管理变得…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
