本篇内容主要讲解“el-table嵌套el-popover处理卡顿如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“el-table嵌套el-popover处理卡顿如何解决”吧!
罪魁祸首
一个常见的场景是在表格行内以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的时候）
到此，相信大家对“el-table嵌套el-popover处理卡顿如何解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
