element ui el-table在ie浏览器数据多时卡顿问题

最新推荐文章于 2024-08-29 15:33:01 发布
最新推荐文章于 2024-08-29 15:33:01 发布
阅读量2.8k 收藏 2
点赞数 2
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52400118/article/details/112464017
版权

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-table的大，不然会被遮挡）

gu_eu
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢
weixin_45776447的博客
05-13 1270
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢 问题描述： ie浏览器下，element table组件固定列如果触发鼠标滑动事件时，整体页面滚动速度大幅度降低 chrome浏览器下，速度仅仅是小幅度降低 原因： tab组件默认调慢了固定列滑轮滚动的效果 解决方法： 禁用固定列整体的监听事件 .el-table__fixed{ pointer-events: none } 或者禁用多数列并针对个别列接触禁用， .el-table__fixed{ .el-table_
el-table渲染10000条数据卡死解决代码
weixin_35750747的博客
12-21 2238
<p>在使用 el-table 渲染大量数据时，会发现渲染速度很慢，甚至会卡死。这是因为 el-table 默认是将所有数据渲染到页面上，当数据量很大时，会导致页面渲染速度极慢，甚至卡死。</p> <p>解决方法有以下几种：</p> <ol> <li><p>使用分页功能。el-table 提供了分页功能，可以将大量...
el-table显示数据量大导致页面卡顿问题优化
jl____的博客
09-21 2017
el-table显示数据量大导致页面卡顿问题优化
【Element-ui】el-table大数据量渲染卡顿问题
热门推荐
qq_39404437的博客
02-23 2万+
在项目开发中，遇到在表格中一次性加载完的需求，且加载数量不少，有几百几千条，并且每条都可能有自己的下拉框，输入框来做编辑功能，此时普通的el-table肯定会导致浏览器卡死，那么怎么办呢？
解决el-table异步加载任务子项数据时页面卡顿的问题
m0_73298638的博客
07-08 268
vue el-table 异步加载 页面卡顿 key
el-table表格（含输入框、下拉框等）-大量数据时，渲染卡顿问题解决方案
weixin_43455451的博客
01-22 3875
因为表格中嵌套大量的输入框、下拉框等编辑组件，当返回数据有两千条时，进入页面加载特别慢，而且编辑时卡顿。原因就是页面的输入框、下拉框等组件数量太多，渲染需要花费很长时间，导致特别慢，性能问题严重。下面是表格组件（后台返回全部数据后，将数据以allData传给此组件，默认显示10条，滚动时，当滚动条触底，加载下一页数据，在之前10条数据的后面进行累积，共20条，直至数据全部加载）项目中，产品不想要分页查询，想要初始就查询出所有数据再用表格把所有数据渲染出来，并支持编辑。
element/Antd vue 表格性能问题，表格数据多导致页面卡顿问题解决思路与方法
lihaogn的博客
09-26 1万+
element/Antd vue 表格性能问题，表格数据多导致页面卡顿问题解决思路与方法 工作中，使用了 Antd vue 中的 a-table 组件，当表格数据过多时导致页面卡顿，并且表格多选也会出现卡顿，测试提出了性能bug。。。 table 没有设计成分页那种加载数据的形式，而是用滚动加载的方式不停地加载数据，我也是醉了。。。 在百度了一圈后，发现解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多，然后页面就卡顿了。。。 下面使用 element 中的 e
vue项目中解决el-table数据过多导致页面卡顿问题
最新发布
高宇辰
08-29 673
要用到umy-ui库，umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。u-table增加三个属性(必须)： use-virtual，row-height，height，表示启用虚拟列表。把el-table-column改成u-table-column。把el-table改成u-table。
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
D浩DzD的博客
09-30 1万+
element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题
ie下elementUI el-table很卡的问题
langyalaoa的博客
12-10 3646
1、升级elementUI到v2.8.0以上 2、避免使用show-overflow-tooltip 3、在el-table或父元素上设置z-index，或调高z-index （针对ie）
解决el-table数据量过大加载卡顿问题
weixin_44220858的博客
09-28 4327
解决由于数据量过大。使用el-table后页面卡顿，有时候网页直接崩溃问题。
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢 另类解决方法
weixin_45776447的博客
06-30 1374
[IE兼容] el-table组件固定列触发滑轮滚动时，移动速度缓慢及动画不流畅 之前通过css 禁用固定列的鼠标事件形成事件穿透解决 详见上篇文章: el-table组件固定列触发滑…. style{ pointer-events:none } 方法暴力，但对后续业务却造成影响，例如在固定列上增加点击事件时，虽然可以通过 pointer-events:auto 恢复，但滑动穿透效果失效 通过对固定列页面打断点定位mousewheel方法，发现element-ui及引用的normalize-wheel.
vue的IE兼容性问题
时霗的博客
04-14 689
文章目录vue的IE兼容性问题1.其他浏览器正常，IE加载空白页2.IE在对话框使用el-table的滚动条会卡顿3.其他浏览器正常，IE加载空白页总结 vue的IE兼容性问题     最近的项目需要兼容IE浏览器，下面是兼容IE遇到的一些问题 1.其他浏览器正常，IE加载空白页 解决方法：由于IE不支持localStorage，所以使用 sessionStorage 代替 localStorage。 2.IE在对话框使用el-table的滚动条会卡顿 解决方法：在
【element ui】问题集锦
Beam
03-29 2107
现象： 在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。 解决： 官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。 监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。 代码： watch: { '$attrs.data': { handler (val) { this.$refs.com
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2218
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
解决el-table数据量过大(上万条)加载及复选框选择卡顿问题
yhengf_520的专栏
08-01 1万+
el-table卡顿问题，el-table数据量过大，el-table复选框卡顿问题
element -UI升级，使用el-tabs导致浏览器卡死问题
code_carrierV1的博客
08-31 2836
elementUI版本升级踩坑
element-ui使用el-tabs组件的时候浏览器直接卡死的问题
weixin_34185560的博客
06-28 2297
遇到这个问题的原由是：本身自己项目的elementUI版本是2.0.11较低了，项目有个功能是自定义progress进度条颜色，无奈高版本的才有这个配置，所以就升级了elementUI，升级到了最高版本2.10.0。这样就出现问题项目中有的页面打不开并且造成浏览器窗口崩溃，于是就在卡顿的页面把代码全部清空，然后一点点复原找问题，才找到问题出现在el-tabs身上，但是不知道怎么改掉，于是就上网查资...
elementui的tab和动态组件一起使用的时候卡住
qqCEM的博客
01-10 540
modal中使用tab和动态组件的时候关闭modal导致浏览器卡死
element ui el-table中多选
08-30
在 Element UI 的 el-table 中实现多选功能，你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码： ```vue <template> <el-table :data="tableData" :selection="selection" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> <el-table-column prop="address" label="Address"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, address: '1234 Street' }, { name: 'Jane', age: 25, address: '5678 Street' }, { name: 'Tom', age: 30, address: '9876 Street' }, { name: 'Alice', age: 35, address: '5432 Street' } ], selection: [] }; }, methods: { handleSelectionChange(selection) { this.selection = selection; } } }; </script> ``` 在上述代码中，我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后，我们使用 selection 属性绑定一个空数组，并通过 @selection-change 监听选择变化事件，在方法中更新 selection 数组的值。 这样，你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时，selection 数组会随之更新。你可以根据需要进一步处理选择的数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值