当前位置: 首页 > 知识库问答 >
问题:

javascript - vue2.x,el-table 切换编辑模式后,部分单位格中是 el-select,导致渲染卡顿时间很久,有什么解决方式吗?

秦育
2024-01-16

el-table 切换编辑模式后,部分单位格中是 el-select,导致渲染卡顿时间很久,有什么解决方式吗?

目前已经做了每页只加载15条数据的分页,但是因为下拉框组件很多,加载单页依旧要卡顿好几秒
(已经做了每页只显示15条的分页,我看了很多方案是虚拟滚动,还需要虚拟滚动吗?)

需求就是批量编辑,无法更改需求为单行编辑

所以在这个需求的基础上,如何才能减少卡顿呢?

每一行的数据存在3个以上的 el-select 组件,部分组件的下拉数据存在几十条

共有1个答案

欧阳翔
2024-01-16

和产品商量一下改变交互吧,同一时间内用户应该只能改变一个下拉框的值,所以没必要把所有的下拉框同时渲染出来。可以通过双击单元格或者单独在单元格内放一个编辑按钮这样的形式来渲染下拉框。

 类似资料:
  • iPhone在低电量模式会导致three.js项目掉帧与卡顿 在做Telegram Mini APP开发的时候遇到的问题,正常模式下无异常; 在iPhone进入低电量模式后,Mini APP里的three.js会出现严重的掉帧和卡顿。 在未显示three.js的内容时页面内存用量130M, 启用后内存用量在150M~163M。 请问是什么原因导致的?和CPU降频、动效被简化相关吗?有无解决办法?

  • el-table 中实现表格可编辑,使用el-table中的cell-mouse-enter和cell-mouse-leave来做触发事件,当可编辑里面嵌入的是el-select时,点击想选择选项,单元格移出去选择,选项就跑走了。el-select中的选择框和下拉框是否不是一体的?用select就可以选择。 把el-select中的选择框和下拉款之间的间距调整为紧贴,但还是鼠标一到下拉框就跑走了。

  • elementUI el-drawer 点击右上角 关闭按钮会卡顿,添加动画这之后 edge浏览器可以了,谷歌上还是卡。这个怎么解决

  • 表格数据转换,后台返回的表格数据状态都是数字,所以前台需要转换一下。 后台返回的状态配置数据: 表格数据 根据状态配置数据使得前台表格展示相应的名称label。 我是怎么处理的呢,我对el-table进行二次分装,然后在处理数据转换 filterVal就是我分装的方法,但是封装的有问题,展示出来的还是数字

  • 在线demo: https://codesandbox.io/s/el-table-he-bing-xing-de-hover-wen-t... 效果1:鼠标悬停在第一行的时候,跟悬停第二行一样,只高亮右侧(或者每一行都高亮合并行) 效果2:鼠标悬停在合并行的时候,触发所有行的高亮