您现在的位置是:首页 > 正文

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

2024-02-01 04:04:47阅读 2

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

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

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

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

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

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

网站文章

  • 前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    生成骨架标签新增代码详解

    2024-02-01 04:04:35
  • vue diff算法

    vue diff算法 在vue中的实现原理,patch函数、patchVnode、updateChildren、sameVnode函数的介绍

    2024-02-01 04:04:27
  • AndroidStudio 本地代码上传githup上面

    AndroidStudio 本地代码上传githup上面

     第一步:首先在androidstudio 中 Terminal 中 创建 git init第二步:然后在githup中创建如果在创建的时候点击了 Initalize this repository with aREADME   到时候push代码会抱一个错误 error: failed to push some refs解决方案是:1、在使用git 对源代码进行push到...

    2024-02-01 04:03:56
  • cs计算机科学好学吗,CMU哪个专业最难申请?竟然不是计算机!_托普仕留学

    cs计算机科学好学吗,CMU哪个专业最难申请?竟然不是计算机!_托普仕留学

    CMU全称为卡内基梅隆大学,是美国顶级的私立高等学府,该校多个专业位居全美前列,那么你知道CMU哪个专业最难申请吗?经数据考证,最难申请的竟然不是大名鼎鼎的计算机专业!首先,CMU的本科有7个学院,包...

    2024-02-01 04:03:48
  • 哈希表-有效字母异位词

    哈希题目

    2024-02-01 04:03:42
  • c++多文件结构 & 程序编译后出现的文件

    c++多文件结构 & 程序编译后出现的文件

    通常一个项目至少划分3个文件;决定一个声明放在源文件还是头文件中的一般原则;外部变量与外部函数;程序编译后会出现的文件——目标程序文件(*.obj)、无编译浏览文件(*.ncb)、工程文件(*.dsp)、工作区文件(*.dsw)、编译信息文件(*.plg)。

    2024-02-01 04:03:13
  • 例子说冒泡排序

    1. 比较相邻的元素。如果第一个比第二个大,就交换他们两个。2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。3. 针对所有的元素重复以上的步骤,除了最后一个。4. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。

    2024-02-01 04:03:06
  • 怎样使用计算机上的高级共享设置密码,怎么设置电脑共享密码

    怎样使用计算机上的高级共享设置密码,怎么设置电脑共享密码

    怎么设置电脑共享密码在电脑上怎么设置共享密码?一起来看看!怎么设置电脑共享密码(一)怎么设置电脑共享密码1右击“我的电脑”,从弹出的窗口中选择“管理”项。2并在打开的“计算机管理”窗口中,切换至“用户...

    2024-02-01 04:02:59
  • C++ Web编程实战

    C++ Web编程实战

    一CGI程序的工作方式 在浏览器向Web服务器请求一个后缀是cgi的URL或者提交表单的时候,Web服务器会把浏览器传过来的数据传给CGI程序,CGI程序通过标准输入来接收这些数据。CGI程序处理完数据后,通过标准输出将结果发往Web服务器,Web服务器再将这些信息发送给浏览器。 二架设Web服务器Apache 1用rpm来查看Apache是否安装 [root@localhost ...

    2024-02-01 04:02:30
  • 使用计算机进行财务处理是计算机在,计算机中级考试练习题中的理论题(含答案)...

    B.储存更多信息C.存取速度更快D.虽贵,但能储存更多信息57.相对于主机来说,硬盘既是输入设备又是输出设备。(A)A.正确B.错误58.当磁盘处于写保护时,磁盘信息(A)。A.只能读不能写B.只能写...

    2024-02-01 04:02:23