vue一次性渲染大量表格数据的解决方案(vxe-table)

简介: vue一次性渲染大量表格数据的解决方案(vxe-table)

业务场景

目前项目有个粘贴名单的需求,就是粘贴大量人员名单解析后一次性渲染到表格里,不经过处理目前超过40条表格数据页面会变得卡顿,不流畅,达到60条数据输入框输入异常卡顿,很没有体验,连开发都觉得没体验,更别提用户了

原因和解决方案

原因其实很简单,就是一次性渲染数据太多占用了太高的浏览器性能资源,导致。

故有虚拟滚动的方案,类似于长列表的懒加载(分片加载),即先渲染一部分数据,例如10条再让用户滚动一定位置来渲染与滚动长度相匹配的数据


成熟的解决方案

成熟的解决方案即比较成熟的库,当然实现方案也不难,后面会介绍实现逻辑

vxe-table

vxe-table

文档:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api

演示:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll

详细使用方法:


相关文章
|
5天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
6 0
|
5天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
9 1
|
5天前
|
JavaScript
vue3使用element-plus 树组件(el-tree)数据回显
vue3使用element-plus 树组件(el-tree)数据回显
7 0
|
8天前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
17 2
|
8天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
14 2
|
18天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
4天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
14 0
|
4天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
4天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
13 0
|
4天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为"/h5/party/pc/",在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题