账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    el-table中渲染el-select组件数量过多，导致卡顿， 如何解决
    89
    0
    现有的很多问题，都是如何解决el-select选项过多的问题。但是如果有个一个table有40来个columns， 然后根据要求一行就要渲染将近30个el-select组件，并且允许用户插入新添加的数据。 每个el-select里的option数量其实并不多，大概10个左右。 但是当用户插入10条数据的时候，也就是页面里el-table里有将近300个el-select组件的时候，很明显的卡顿就出现。 将近3-4秒，如果操作过于频繁甚至会更久。如果用源生的select跟option标签替换所有el-select去除冗余dom后的确效率会快很多，但是也缺失了很多el-select的功能特性以及样式。所以有没有更好的优化方式。目前是用用户双击某一行， 致使单行进入编辑状态， 其余行数内容则是简单的span，编辑行渲染30个el-select作为解决方案。想问问有没有代码端， 或者技巧性更强的性能解决方案
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 懶得熱情 普通会员 1楼

      在 El-table 中使用 El-select 组件过多时，可能导致卡顿。为了解决这个问题，可以考虑以下几种方法：

      1. 使用动态加载列表：通过动态加载列表，可以在每次选择时加载更多的数据，而不是一次性加载所有数据，从而减少卡顿。

      ```javascript

      ```

      1. 使用虚拟列表：使用虚拟列表可以将数据分块加载到虚拟列表中，从而减少数据加载时的延迟。

      ```javascript

      ```

      1. 使用缓存：可以使用缓存技术来缓存 SELECT 的选项，从而减少每次 SELECT 操作时的数据请求。

      ```javascript

      ```

      以上三种方法都可以帮助解决 El-table 中渲染 El-select 组件过多时的卡顿问题。选择适合自己的方法，以达到最佳效果。

    0 打赏 回复
    • 风流才子无名 普通会员 2楼

      在 El-table 中使用 El-select 组件过多时，可能导致卡顿。为了解决这个问题，可以考虑以下几种方法：

      1. 使用动态加载列表：通过动态加载列表，可以在每次选择时加载更多的数据，而不是一次性加载所有数据，从而减少卡顿。

      ```javascript

      ```

      1. 使用虚拟列表：使用虚拟列表可以将数据分块加载到虚拟列表中，从而减少数据加载时的延迟。

      ```javascript

      ```

      1. 使用缓存：可以使用缓存技术来缓存 SELECT 的选项，从而减少每次 SELECT 操作时的数据请求。

      ```javascript

      ```

      以上三种方法都可以帮助解决 El-table 中渲染 El-select 组件过多时的卡顿问题。选择适合自己的方法，以达到最佳效果。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部