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

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

秦育
2024-01-16

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

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

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

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

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

共有1个答案

欧阳翔
2024-01-16

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

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

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

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

  • vue3 render函数方式创建el-select,不能回显是什么问题呢?

  • 本文向大家介绍vue el-table实现行内编辑功能,包括了vue el-table实现行内编辑功能的使用技巧和注意事项,需要的朋友参考一下 最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样: 分为下面几个步骤: (1) 自定义 el-table 的表头(即添加 “新增” 按钮): 表头自定义了一个“添加”按