element表格组件实现虚拟滚动，解决卡顿问题

最新推荐文章于 2024-07-01 09:24:49 发布
最新推荐文章于 2024-07-01 09:24:49 发布
阅读量4.5k 收藏 19
点赞数 3
分类专栏： element 文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36733603/article/details/117821184
版权
本文介绍了如何使用Element UI的表格组件实现虚拟滚动，通过这种方式有效解决了在大数据量展示时的页面卡顿问题，提供了流畅的用户体验。
摘要由CSDN通过智能技术生成

效果图:
element表格组件实现虚拟滚动，解决卡顿问题
element表格组件实现虚拟滚动，解决卡顿问题

vue代码

<template>
  <el-table
    :data="tableData"
    ref="tableRef"
    style="width: 900px"
    max-height="380"
    border
    stripe
    class="myTable"
  >
    <el-table-column
      prop="date"
      label="必要元素："
      min-width="150"
      align="center"
      fixed="left"
    >
    </el-table-column>
    <el-table-column label="每一行高度必须相同">
      <el-table-column
        prop="name"
        label="class不能为【myTable】"
        min-width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column label="ref不能为【tableRef】">
        <el-table-column
          prop="province"
          label="省份"
          min-width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          min-width=
最低0.47元/天 解锁文章
kd2022
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢
weixin_45776447的博客
05-13 1264
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢 问题描述： ie浏览器下，element table组件固定列如果触发鼠标滑动事件时，整体页面滚动速度大幅度降低 chrome浏览器下，速度仅仅是小幅度降低 原因： tab组件默认调慢了固定列滑轮滚动的效果 解决方法： 禁用固定列整体的监听事件 .el-table__fixed{ pointer-events: none } 或者禁用多数列并针对个别列接触禁用， .el-table__fixed{ .el-table_
element ui 弹出框里的table滚动卡顿问题
RubyLinT的博客
04-12 650
修改弹出框样式：z-index:9999;
vxe-table解决数据太多卡顿问题
最新发布
2301_77529176的博客
07-01 822
当为vxe-table设置了height和max-height属性时，该容器会启用虚拟渲染的机制。这种机制的触发规则是由scroll-x和scroll-y属性来控制的。目前项目导入数据后一次性渲染到表格里，不经过处理导入大量数据输入框输入异常卡顿。
ElementUi 表单联动延迟加载问题
白不懂黑的静的专栏
09-14 1338
现象： 在ElementUi中我们建立一个表单，然后给表单绑定了属性data,然后依次从data对象中取值和表单中的各控件进行绑定；然后当表单中的A下拉框的值变更后，我需要手动触发去变更B和C两个控件，结果发现现象，每次赋值后，B和C控件总是延迟加载，显示上一次我赋值的结果。 原因： 在初始化data的时候data定义有问题： 我刚开始定义的时候，data是如此定义的： data{} 正确的写法应该是： data{ id:undefined, name:undefined, ..
element UI表格数据动态变化导致表格加载缓慢及高度改变问题
qq_53769810的博客
11-28 981
element UI表格数据动态变化导致表格加载缓慢及高度改变问题
实现虚拟滚动表格（无限滚动）
qq_41709082的博客
01-14 1705
实现虚拟滚动表格（无限滚动） 背景：项目组中，原来使用的element UI 中的table组件当一页数据量多了之后页面渐显卡顿，不满足要求，所以就决定自己开发一个table组件，当然解决这个问题，不一定要自己开发一个table组件，可以有其他的现成的库直接用，或者可以用分段式（切片）加载的方式来解决这个问题。因为正好年底，时间稍微宽裕些，所以就打算自己开发一个，正好也能了解到整个table组件的实现方式。 正文：代码我直接上传到gite上了，要使用或者想了解一下自己开发一个table组件的思路的可以自行p
element ui el-table在ie浏览器数据多时卡顿问题
gu_eu的博客
01-11 2864
element ui el-table在ie浏览器数据多时卡顿问题 vue项目中使用ElementUI组件库，在需要兼容ie时，使用到el-table，在表格数据较多的情况下，分页选每页数据展示超过20条时，表格下滑很卡顿。 解决方案： 1、升级elementUI到v2.8.0以上 2、避免使用表格中使用show-overflow-tooltip 3、在el-table或父元素上设置z-index，或调高z-index （针对ie）（调高z-index,请注意页面弹出框等元素z-index值要比el-ta
Egrid基于ElementUITable组件封装的高阶表格组件
08-07
**Egrid：基于Element-UI Table的高阶表格组件** Egrid是一款优秀的JavaScript开发工具，它专注于表格和网格的处理，特别是在基于Vue.js框架的应用中。这个组件是对Element-UI库中的Table组件进行的深度封装，旨在...
ElementUI2.0下拉框组件实现虚拟列表，自定义指令虚拟下拉列表
郊眠寺
10-20 3573
主要是写了一个指令，在elementUI的select组件上支持虚拟列表展示，我们在项目使用自定义指令支持下拉框的虚拟列表* 使用第三方插件实现虚拟列表* 本文实例源码* 个人比较推荐社区优秀成熟的第三方库去满足我们的业务，自己虽然手写了一个指令支持虚拟列表，但是在业务时间紧凑的情况下，肯定优先使用插件，除非插件不满足我们自己的业务需求，那么只能自己造轮子了。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢 另类解决方法
weixin_45776447的博客
06-30 1360
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢及动画不流畅 之前通过css 禁用固定列的鼠标事件形成事件穿透解决 详见上篇文章: el-table组件固定列触发滑…. style{ pointer-events:none } 方法暴力，但对后续业务却造成影响，例如在固定列上增加点击事件时，虽然可以通过 pointer-events:auto 恢复，但滑动穿透效果失效 通过对固定列页面打断点定位mousewheel方法，发现element-ui及引用的normalize-wheel.
对antd表格中虚拟列表的整合和封装
liuyuhua666的博客
09-02 3545
由于用户反馈页面过于卡顿，考虑到后台总是返回大量的数据，于是表格性能对页面流畅的影响还是挺大的，由于本身能力有限，然后发现antd表格中有一个虚拟列表功能，但是发现功能只能纯粹展示大量的数据而没有其它的交互，而且我开发的项目用的react还是15.x版本的，没办法，只能自己去看看能不能改造一下。 目前整合了项目常用的分页和可伸缩列两个功能，本来还想整合固定列以及可选择，但是还没有成功。。。 virtualTable.js： import React from 'react'; import './virtu
Element UI中的table组件添加横向滚动条转载的加上自己的理解和问题
m0_59638694的博客
07-25 1161
elementui的table的横向滚动条不显示
el-table实现虚拟滚动 | 一篇讲清什么是虚拟滚动，该如何实现 | Vue2 | ElementUI
x1145540679的博客
03-04 4598
一篇搞定虚拟滚动，小白也能看懂的文章
使用vue实现高性能虚拟滚动组件
不知名攻城狮的博客
03-22 3296
<template> <div> <div :style="`height:${viewH}px;overflow-y:scroll;`" @scroll="hanldeScroll"> <div :style="{height:scorllH}"> <div class="item_box...
使用element 中的el-scrollbar组件取代浏览器滚动条时遇到问题
NICKDL的博客
06-06 763
之后又发现了新的问题，切换页面时滚动条无法回到页面顶部了，永远是上个页面滚动的位置；以上就是在整个浏览器中使用组件所遇到的问题，记录一下。事实上下面还有很多内容，所以滚动条高度肯定是不对的；可以看到页面滚动条就变正常了；
vue+element table表格实现懒加载效果
weixin_44546460的博客
03-26 577
懒加载
vue2 实现滚动条scroll 数据懒加载
weixin_44892327的博客
05-04 622
这里你注意document.getElementById的时候是要找你的容器比如div这种把你的内容包裹起来的这种dom，不然浏览器会报错找不到addEventListener这个方法。函数防抖一般是用在事件上，比如：查询团队名是否重复，那你需要等待用户输入完团队名才能查询，不然就是浪费请求资源，函数节流也是同理。在做滚动条数据懒加载的时候，我遇到了一触底然后就多次调用接口的情况，随后了解到了。这两个概念，这里我们需要使用到函数节流这个东西，在一定时间内只执行一次请求。
elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错乱表格偏移问题
yuan20010401的博客
12-17 5972
el-table横向纵向渲染 横向纵向渲染需要两类数组，一类渲染表头，另外一类需要渲染内容，表头数组每一个对象需要塞入两个值 一个为表头渲染的内容即绑定label 另外一个为该纵列值所在字段名即绑定prop <el-table ref="refreshTable" v-loading="loading" :data="listData" :header-cell-style="{ background: '#007F69', color: '#fff'
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。 实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值