导读 | 本文主要介绍了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"> 通过 < popover=""> < div="" class="popover-list-item" @click="handleLog(row)">查看日志 < opover=""> < emplate=""> < l-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="" --=""> < iv=""> < iv=""> < emplate=""> < emplate=""> < l-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="" --=""> < iv=""> < iv=""> < emplate=""> < l-table-column=""> < el-table-column="" label="操作" min-width="150"> < template="" #default="{ row }"> < div="" class="trigger"> < div="" :ref="ref => (refMap[`${row.commentId}Check`] = ref)"> < !--="" 触发内容3="" --=""> < iv=""> < iv=""> < emplate=""> < l-table-column=""> < l-table=""> < el-popover="" v-model:visible="visiblePopover" :virtual-ref="tempRef" virtual-triggering="" :width="popoverWidth"> < template="" v-if="popoverType === -1"> < !--="" 业务逻辑1="" --=""> < emplate=""> < template="" v-else-if="popoverType === 0"> < !--="" 业务逻辑2="" --=""> < emplate=""> < template="" v-else=""> < !--="" 业务逻辑3="" --=""> < emplate=""> < l-popover=""> < emplate=""> < 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 } < cript=""> < style="" lang="scss" scoped=""> .trigger { display: contents; } < tyle="">
现在,在这个例子中:
到此这篇关于el-table嵌套el-popover处理卡顿的解决的文章就介绍到这了。