vue大数据表格卡顿问题的完美解决方案

前言

vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法

点我在线体验Demo(请用电脑查看)

亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢

先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列

项目源代码地址 Github (本地下载)

解决问题核心点:横向滚动加载,竖向滚动加载

项目背景

笔者最近在做广告排期功能,需要进行点位预占,大的合同可能需要对多个资源排期,周期可能到几年这样,然后我们的页面交互是这样

横向每个月30个单元格,最多的3年,36个月,每行36*30=1080个单元格

竖向100个资源,总共约️10W个单元格,然后每个单元格里面会有一个输入框,一个库存总数,所以总数是20W个,内网使用,接口请求根本不是问题,可以浏览器渲染就扛不住了接口回来之后会出现几十秒的白屏,整个页面处于卡死状态

这还不算,加载出之后页面操作也是非常卡,滑动延迟严重,页面基本处于瘫痪状态

之前的功能是基于jquery开发的,项目重构用的vue,UI采用了ElementUI,ElmentUI中的表格在数据量较大是有严重的性能问题,最直接的表现就是白屏时间较长,而且会出现渲染错乱

所以就想着自己实现一个表格,解决卡顿问题

实现思路

表格拆分,动态加载

表格横向按月拆分,每个月份单独一个table,月份table外层放一个占位div,根据横向滚动位置控制展示

竖向按资源拆分,同样包裹一个占位div,按照滚动位置动态加载,始终保持dom数量上线

动态编辑,按需生成编辑输入框

不同的标签在浏览器渲染时性能是不一样的,比如input这种标签就比span等标签重许多,所以不能满屏input

方案就是点击单元格展示输入框,焦点丢失移除,此处的展示非display控制显示隐藏,而是v-if控制dom是否加载

代码分解

固定头

<div class="table-head">
  <div class="module"
  v-bind:style="{ transform: 'translateX(' + scrollLeft + 'px)' }"
  v-for="(item, index) in monthData" v-bind:key="index">
  <table cellspacing="0" cellpadding="0">
  <thead>
  <tr>
   <td colspan="30">{{item.month}}</td>
  </tr>
  <tr>
   <td width="100"
   v-for="(d_item, d_index) in item.days" v-bind:key="d_index"
   style="min-width:100px">{{d_item}}</td>
  </tr>
  </thead>
  </table>
  </div>
 </div>

固定列

 <div class="table-fix-cloumns">
  <div class="module fix-left-top">
  <table width="100" cellspacing="0" cellpadding="0">
  <thead>
  <tr>
   <td>位置</td>
  </tr>
  <tr>
   <td>position</td>
  </tr>
  </thead>
  </table>
  </div>
  <div class="module" v-bind:style="{ transform: 'translateY(' + scrollTop + 'px)' }">
  <table width="100" cellspacing="0" cellpadding="0">
  <thead>
  <tr v-for="(item, index) in projectData" v-bind:key="index">
   <td>{{item.name}}</td>
  </tr>
  </thead>
  </table>
  </div>
 </div>

表体

<div class="table-body" @scroll="tableScroll" style="height: 300px">
  <div class="module"
  style="width:3000px;"
  v-for="(item, index) in monthData" v-bind:key="index">
  <div class="content"
  v-if="Math.abs(index - curModule) < 3">
  <div class="row"
  style="height:30px"
  v-for="(p_item, p_index) in projectData"
  v-bind:key="p_index">
  <table width="3000"
   v-if="Math.abs(p_index - curRow) < 20"
   cellspacing="0" cellpadding="0">
   <tbody>
   <tr>
   <td
   @click="clickTd(p_index,item.month, d_item, $event)"
   v-for="(d_item, d_index) in item.days" v-bind:key="d_index">
   <span v-if="!originProjectData[p_index][''+item.month][''+d_item]['show']">{{originProjectData[p_index][''+item.month][''+d_item]['last']}}</span>
   <input
   @blur="blurTd(p_index,item.month, d_item)"
   v-if="originProjectData[p_index][''+item.month][''+d_item]['show']"
   v-model="originProjectData[p_index][''+item.month][''+d_item]['last']"
   v-focus="originProjectData[p_index][''+item.month][''+d_item]['focus']"/>
   </td>
   </tr>
   </tbody>
  </table>
  </div>
  </div>
  </div>
 </div>

经过如上优化,完美解决表格卡顿问题,但是我并没有封装组件,原因如下

·插件封装后会有很多限制,不能再用vue那种模板写法,用json传入数据,自定义内容不是很灵活
·可以根据自己的应用场景自行修改拓展,代码已经很简洁
·比较懒

如果你有类似需求可以试一下我这个,也欢迎Star

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • 解决vue 表格table列求和的问题

    最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几乎满足需求了,但是还有个小问题就是列求和没搞定,这可咋整啊.看了element-ui是有这么个功能,遂翻开源码看了下也没看出啥话头,心想算了,自己来实现,网上搜了下,偶然看到一位仁兄的写法,拿过来稍微修改了下,果真是有用,在此感谢那位仁兄!(我本身对前端不专业,侧后端) 下面贴代码: /** jav

  • Element-UI中关于table表格的那些骚操作(小结)

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • elementUI中Table表格问题的解决方法

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. 在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考. 1.表格样式问题: 混乱样式.png 正常样式.png 如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题.

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • vue渲染大量数据时卡顿卡死解决方法

    目录 1. 问题描述 2. 常见的解决方案 3. 解决方案流程图 4. 代码 1. 问题描述 由于业务需求,需要在一个页面中点击查询按钮时加载出所有的数据,但数据量有近10万条,渲染出现卡顿,页面卡死. 2. 常见的解决方案 - 自定义中间层 自定义nodejs中间层,获取并拆分这10w条数据, 前端对接nodejs中间层,而不是服务器 缺点:成本高 - 虚拟列表 只渲染可视区域DOM,其他隐藏区域不显示,只用div撑起高度,随着浏览器滚动,创建和销毁DOM. 虚拟列表实现起来非常复杂,可借用第

  • SpringBoot+VUE实现数据表格的实战

    目录 前言 使用的开发工具: 一.前端准备 1. 基础界面 2. 导入JS文件 二.后端准备 1. 创建实体类 2. Controller层 3. Service层 4. Mapper层 三.前后端整合 四.运行结果 总结 前言 还记得第一次做项目时,因为不会将数据库表中的数据渲染到前端而头疼,最后还是靠layui提供的数据表格API实现了前端数据表格的渲染.一直到现在做了很多SpringBoot项目.SSM项目之后,现在返回头来看这个曾经这个让我备受折磨的问题,脑海中下意识就会想到很多种解决的

  • Vue实现数据表格合并列rowspan效果

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩. html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> <th>姓名</th> <th>课程数</th> <th>课程名称</th> <th>成绩</th> </tr> </thead> <

  • 基于vue实现web端超大数据量表格的卡顿解决

    一.整体思路 1.思路来源 最近工作比较忙好久没写文章了,有一丢丢不知道如何写起了,那就先说说我是为什么要开发本文的组件把.公司有一个定位系统,基本上来说一个定位单位一分钟或者更短就会有一个定位点,这样一天下来就会有很多定位点了,如果表格想要一下子放一天甚至三天的数据,那么数据量将会特别大(可能会到达5万条左右的数据),如果我们显示的列又比较多的话,那么表格的卡顿问题就会很明显了.我们公司web端选择的ui框架是 iview  ,说实话 iview 的其他组件还行,不过表格的话在大量数据面前显得

  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题.如果去除右侧iframe框架,则没有问题. 有iframe情况 无iframe情况 问题原因&am

  • 分享4个最受欢迎的大数据可视化工具

    想像阅读书本一样阅读数据流?这只有在电影中才有可能发生. 在现实世界中,企业必须使用数据可视化工具来读取原始数据的趋势和模式. 大数据可视化是进行各种大数据分析解决的最重要组成部分之一. 一旦原始数据流被以图像形式表示时,以此做决策就变得容易多了. 为了满足并超越客户的期望,大数据可视化工具应该具备这些特征: ·      能够处理不同种类型的传入数据 ·      能够应用不同种类的过滤器来调整结果 ·      能够在分析过程中与数据集进行交互 ·      能够连接到其他软件来接收输入数据

  • element table 数据量大页面卡顿的解决

    目录 element table数据量大页面卡顿 调用接口 table组件 data里使用到的数据 el-table大数据量渲染卡顿的一种思路 思路 滚动监听 slider element table数据量大页面卡顿 table显示医院列表,这里后台未做分页,总共数据大约8000条. 一次性全部赋值给table整个页面都会卡顿好几秒. 查看了请求接口到数据返回的时间为192ms,可以接受. 应该是页面渲染的问题. 这边就在前端做了分页处理. 调用接口 // 获取医院列表 getHospitalL

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

  • Element的穿梭框数据量大时点击全选卡顿的解决方案

    目录 方案一:复制EUI的transfer组件,然后进行修改,再引入项目目录 方案二:分页操作 分析 方案 现象:我们渲染了9999条数据,由于transfer组件会一次性渲染所有数据,所以一次性渲染这么多,卡个几十秒很正常好吧.所以懒加载或者分页是基本操作,方案二是分页操作. 懒加载的方式可以用EUI的无限滚动:https://element.eleme.cn/ 即便我们做了懒加载之后,点击全选依旧是卡顿6秒以上,所以方案一解决的是:即便做了懒加载或者分页操作后,用户点击分页,依旧会卡顿几秒的

随机推荐