el-table嵌套el-popover处理卡顿的解决
作者:偶尔吃麻辣烫 时间:2024-05-09 15:22:34
?? 罪魁祸首
一个常见的场景是在表格行内以el-popover的形式对行内信息进行一些业务操作。在表格分页10条、20条的情况下页面运行良好,但是在分页400条的时候会出现肉眼可见的卡顿。原因是表格渲染的popover组件太多了,一行如果至少3个popover组件,那么400行至少就得渲染1200个了。下面就是导致卡顿的通常写法:
<el-table-column label="操作">
<template #default="{ row }">
<el-button class="button-main button-h-28">
通过
</el-button>
<popover>
<div class="popover-list-item" @click="handleLog(row)">查看日志</div>
</popover>
</template>
</el-table-column>
?? 解决方法
el-popover提供了一个虚拟触发的功能,可以将触发内容和下拉内容分开,那这样就可以只用一个popover组件去涵盖所有需要用到的场景。 像这个例子:
<template>
<el-table :date="data">
<el-table-column label="审核语句" min-width="150">
<template #default="{ row }">
<template v-for="(item, index) in row.childBOList" :key="item.clause">
<div class="trigger">
<div
:ref="el => (refMap[item.clause] = el)"
@click="handleRef(refMap[item.clause], item, -1)"
>
<!-- 触发内容1 -->
</div>
</div>
</template>
</template>
</el-table-column>
<el-table-column label="情感打标结果" min-width="150">
<template #default="{ row }">
<div class="trigger">
<div
:ref="ref => (refMap[row.commentId] = ref)"
@click="handleRef(refMap[row.commentId], row, 0)"
>
<!-- 触发内容2 -->
</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="150">
<template #default="{ row }">
<div class="trigger">
<div :ref="ref => (refMap[`${row.commentId}Check`] = ref)">
<!-- 触发内容3 -->
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-popover
v-model:visible="visiblePopover"
:virtual-ref="tempRef"
virtual-triggering
:width="popoverWidth"
>
<template v-if="popoverType === -1">
<!-- 业务逻辑1 -->
</template>
<template v-else-if="popoverType === 0">
<!-- 业务逻辑2 -->
</template>
<template v-else>
<!-- 业务逻辑3 -->
</template>
</el-popover>
</template>
<script setup>
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
}
</script>
<style lang="scss" scoped>
.trigger {
display: contents;
}
</style>
现在,在这个例子中:
popvoer以单例形式存在,不会出现400行就渲染上千个popover组件这样的情况
需要一些中间状态保存相关状态和数据
不同的触发内容外套一层div.trigger用以去解决触发和关闭popper的冲突(当需要用到外部点击去关闭popover的时候)
来源:https://juejin.cn/post/7102393669541429284
标签:el-table,嵌套,el-popover
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
ASP.NET连接SQL数据库的简单实例代码
2024-01-26 06:54:27
python分批定量读取文件内容,输出到不同文件中的方法
2021-10-05 21:29:30
python中的 zip函数详解及用法举例
2023-04-16 15:31:36
VSCODE添加open with code实现右键打开文件夹
2022-02-06 05:09:43
![](https://img.aspxhome.com/file/2023/9/132429_0s.png)
python sorted函数的小练习及解答
2021-10-14 15:50:28
Linux下升级python和安装pip的详解
2022-08-23 06:27:15
![](https://img.aspxhome.com/file/2023/4/110154_0s.png)
斐波那契数列的递归算法优化
2010-01-23 11:37:00
Gradio机器学习模型快速部署工具应用分享前篇
2023-07-23 12:10:45
![](https://img.aspxhome.com/file/2023/5/62845_0s.jpg)
详解四种Python中基本形态学滤波的实现
2023-05-09 15:10:09
![](https://img.aspxhome.com/file/2023/1/65531_0s.png)
Python数学建模库StatsModels统计回归简介初识
2021-05-05 04:57:02
golang中包无法引入问题解决
2023-09-03 12:34:58
python flask实现分页效果
2022-07-18 06:19:22
![](https://img.aspxhome.com/file/2023/6/103526_0s.png)
Python管理Windows服务小脚本
2023-11-07 17:30:59
MySQL索引优化之分页探索详细介绍
2024-01-16 12:05:17
![](https://img.aspxhome.com/file/2023/0/107920_0s.png)
Pytorch 高效使用GPU的操作
2021-10-25 04:45:23
![](https://img.aspxhome.com/file/2023/9/117549_0s.jpg)
uwsgi+nginx部署Django项目操作示例
2021-05-04 02:23:50
![](https://img.aspxhome.com/file/2023/5/97045_0s.png)
Go语言中如何确保Cookie数据的安全传输
2024-05-22 10:21:43
Python操作word文档的示例详解
2021-11-10 02:54:51
![](https://img.aspxhome.com/file/2023/1/93461_0s.png)
超酷的js图片轮播渐变效果
2007-10-10 20:45:00
![](https://img.aspxhome.com/file/UploadPic/200710/10/2007101021445381s.jpg)
python实现向ppt文件里插入新幻灯片页面的方法
2021-09-01 15:58:22