教你如何解决el-table嵌套el-popover处理卡顿问题

作者: 汪之左手
来源: 51数据库
2022-09-20

导读	本文主要介绍了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="">

现在，在这个例子中：

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

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

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

到此这篇关于el-table嵌套el-popover处理卡顿的解决的文章就介绍到这了。