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盘中的文件名突然变成了乱码,无法正常识别或访问。这些乱码文件名可能包含各种奇怪的字符和符号,使得原本有序的文件管理变得…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
