共计 1233 个字符,预计需要花费 4 分钟才能阅读完成。
导读 | 本文主要介绍了 el-table 嵌套 el-popover 处理卡顿的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 |
😖 罪魁祸首
一个常见的场景是在表格行内以 el-popover 的形式对行内信息进行一些业务操作。在表格分页 10 条、20 条的情况下页面运行良好,但是在分页 400 条的时候会出现肉眼可见的卡顿。原因是表格渲染的 popover 组件太多了,一行如果至少 3 个 popover 组件,那么 400 行至少就得渲染 1200 个了。下面就是导致卡顿的通常写法:
通过
查看日志
😁 解决方法
el-popover 提供了一个虚拟触发的功能,可以将触发内容和下拉内容分开,那这样就可以只用一个 popover 组件去涵盖所有需要用到的场景。像这个例子:
(refMap[item.clause] = el)"@click="handleRef(refMap[item.clause], item, -1)"
>
(refMap[row.commentId] = ref)"@click="handleRef(refMap[row.commentId], row, 0)"
>
(refMap[`${row.commentId}Check`] = ref)">
const emotions = [{ desc: '好评', icon: 'icon-xiaolian'},
{desc: '中评', icon: 'icon-wubiaoqing'},
{desc: '差评', icon: 'icon-kulian'}
]
const refMap = ref()
const tempRef = ref()
const visiblePopover = ref(false)
// -1- 字句审核 0- 整句审核 1- 日志查看
const popoverType = ref(0)
const popoverWidth = computed(() => { [-1]: 80, [0]: 150, [1]: 90 }[popoverType.value])
const handleRef = (ref, item, type) => {
tempRef.value = ref
popoverType.value = type
if (~type) {// ... 业务逻辑 1} else {// ... 业务逻辑 2、3}
visiblePopover.value = true
}
.trigger {display: contents;}
现在,在这个例子中:
到此这篇关于 el-table 嵌套 el-popover 处理卡顿的解决的文章就介绍到这了。
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)