【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案

大家好，我是九幡。

在这篇文章我将为大家分享一个优化可编辑el-table性能问题的方案。

目录

问题背景

原因分析

解决思路

样例代码

页面效果

方案的优缺点

问题背景

用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。

原因分析

1. el-input组件实例数量过多。

2. el-input的v-model在表单输入时频繁触发更新事件。

解决思路

1. 用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。

2. 在v-model指令上追加.lazy修饰符，使实例数据仅在失去焦点时更新，减少触发次数。

样例代码

页面效果

此时光标进入输入框，执行输入动作，画面依然能获得快速、良好的反馈：

方案的优缺点

优点：

1. 解决了可编辑el-table在数据量大的情况下的性能问题。

2. 与网上我能够搜索到的大部分解决方案不同，没有额外引入第三方插件。

3. 实现方式简单、快速、方便。

缺点：

没有使用el-input组件，不能直接使用el-input提供的功能。

以上就是本文的全部内容啦，本人能力有限，如果记述有误，还请您留言指出，感谢谅解和支持。

如果您有更好的想法和建议，欢迎留言评论！如果这篇文章有帮助到您，希望您能为本篇文章点个赞！