el-table嵌套el-popover处理卡顿的解决

2022-05-29

目录

罪魁祸首
解决方法

罪魁祸首一个常见的场景是在表格行内以el-popover的形式对行内信息进行一些业务操作。在表格分页10条、20条的情况下页面运行良好，但是在分页400条的时候会出现肉眼可见的卡顿。原因是表格渲染的popover组件太多了，一行如果至少3个popover组件，那么400行至少就得渲染1200个了。下面就是导致卡顿的通常写法：

el-table嵌套el-popover处理卡顿的解决

文章图片

解决方法 el-popover提供了一个虚拟触发的功能，可以将触发内容和下拉内容分开，那这样就可以只用一个popover组件去涵盖所有需要用到的场景。像这个例子：

.trigger {display: contents; }

现在，在这个例子中：

popvoer以单例形式存在，不会出现400行就渲染上千个popover组件这样的情况
需要一些中间状态保存相关状态和数据
不同的触发内容外套一层div.trigger用以去解决触发和关闭popper的冲突（当需要用到外部点击去关闭popover的时候）

【el-table嵌套el-popover处理卡顿的解决】到此这篇关于el-table嵌套el-popover处理卡顿的解决的文章就介绍到这了,更多相关el-table嵌套el-popover卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

上一篇：使用Nginx+Tomcat实现负载均衡的全过程

下一篇：v-for中动态校验el-form表单项的实践