el-table嵌套el-popover处理卡顿如何解决

本篇内容主要讲解“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处理卡顿如何解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！