el-table表中嵌套过多的el-input卡顿问题,优化方案

el-table表中嵌套el-input卡顿的原因:主要是由于每次修改el-input的数据 都会触发el-table中的数据变化,导致整个el-table进行重新渲染,加载dom元素,从而导致卡顿
el-table表中嵌套过多的el-input卡顿问题,优化方案_第1张图片
以上表格可以一直加无数列,当数据过多时,又要支持el-input可以输入时,会造成卡顿。

优化细节:
1.el-table中绑定的元素 确保唯一 也就是给key 增加单独的id key值绑定数据里面的id 可以减少dom的渲染
2.在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发次数
3.使用原生的input标签替换el-input标签

以上三个优化点,只能在数据比较小的情况下优化才有效果,如果数据不定上限,依旧无效。

要实实在在的保证功能,并且不设定增加数据的上限,还是需要从数据入手,分析数据。
我解决卡顿时的思路是:分析数据,截取数据中的一部分进行渲染。突破方向一定要往这方面去思考。

实现方式一:根据滚动方式加载当前一屏的数据,只展示一屏的数据,不在一屏范围内的不做展示。

实现方式二:我这边的需求是,页面一次性增加多个数据,一次性传给后端,就采用了前端分页的方法。 一页我截取多少数据展示。根据切换不同页码,切割el-table中的数据 进行展示对应的分页的数据,不在分页范围内,不做展示,从而解决了输入卡顿的问题,每次加载和修改都是加载某一个的数据,某一页的数据也就对应总的数据中的一部分。减少了dom加载量,从而实现了优化

你可能感兴趣的:(javascript,前端,html,缓存)