el-table嵌套el-popover处理卡顿如何解决(el-popover,el-table,开发技术)

罪魁祸首

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

<el-table-columnlabel="操作"><template#default="{row}"><el-buttonclass="button-mainbutton-h-28">通过</el-button><popover><divclass="popover-list-item"@click="handleLog(row)">查看日志</div></popover></template></el-table-column>

解决方法

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

<template><el-table:date="data"><el-table-columnlabel="审核语句"min-width="150"><template#default="{row}"><templatev-for="(item,index)inrow.childBOList":key="item.clause"><divclass="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-columnlabel="情感打标结果"min-width="150"><template#default="{row}"><divclass="trigger"><div:ref="ref=>(refMap[row.commentId]=ref)"@click="handleRef(refMap[row.commentId],row,0)"><!--触发内容2--></div></div></template></el-table-column><el-table-columnlabel="操作"min-width="150"><template#default="{row}"><divclass="trigger"><div:ref="ref=>(refMap[`${row.commentId}Check`]=ref)"><!--触发内容3--></div></div></template></el-table-column></el-table><el-popoverv-model:visible="visiblePopover":virtual-ref="tempRef"virtual-triggering:width="popoverWidth"><templatev-if="popoverType===-1"><!--业务逻辑1--></template><templatev-else-if="popoverType===0"><!--业务逻辑2--></template><templatev-else><!--业务逻辑3--></template></el-popover></template><scriptsetup>constemotions=[{desc:'好评',icon:'icon-xiaolian'},{desc:'中评',icon:'icon-wubiaoqing'},{desc:'差评',icon:'icon-kulian'}]constrefMap=ref()consttempRef=ref()constvisiblePopover=ref(false)//-1-字句审核0-整句审核1-日志查看constpopoverType=ref(0)constpopoverWidth=computed(()=>{[-1]:80,[0]:150,[1]:90}[popoverType.value])consthandleRef=(ref,item,type)=>{tempRef.value=refpopoverType.value=typeif(~type){//...业务逻辑1}else{//...业务逻辑2、3}visiblePopover.value=true}</script><stylelang="scss"scoped>.trigger{display:contents;}</style>

现在，在这个例子中：

• popvoer以单例形式存在，不会出现400行就渲染上千个popover组件这样的情况

• 需要一些中间状态保存相关状态和数据

• 不同的触发内容外套一层div.trigger用以去解决触发和关闭popper的冲突（当需要用到外部点击去关闭popover的时候）