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

 更新时间:2022年05月29日 10:39:30   作者:偶尔吃麻辣烫  
本文主要介绍了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处理卡顿的解决的文章就介绍到这了,更多相关el-table嵌套el-popover卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目本地开发完成后部署到服务器后报404错误解决方案

    vue项目本地开发完成后部署到服务器后报404错误解决方案

    很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题,但真正放在服务器上后会发现或多或少的问题,这篇文章主要给大家介绍了关于vue项目本地开发完成后部署到服务器后报404错误的解决方案,需要的朋友可以参考下
    2024-01-01
  • 基于axios在vue中的使用

    基于axios在vue中的使用

    这篇文章主要介绍了关于axios在vue中的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 图文详解Vue3没有代码提示问题的解决办法

    图文详解Vue3没有代码提示问题的解决办法

    最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 关于keep-alive路由多级嵌套不生效的解决方案

    关于keep-alive路由多级嵌套不生效的解决方案

    本文主要介绍了关于keep-alive路由多级嵌套不生效的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 解决VUE中document.body.scrollTop为0的问题

    解决VUE中document.body.scrollTop为0的问题

    今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue条件渲染列表渲染原理示例详解

    vue条件渲染列表渲染原理示例详解

    这篇文章主要为大家介绍了vue条件渲染列表渲染原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 关于ElementUI el-table 鼠标滚动失灵的问题及解决办法

    关于ElementUI el-table 鼠标滚动失灵的问题及解决办法

    这篇文章主要介绍了关于ElementUI el-table 鼠标滚动失灵的问题及解决办法,本文给大家分享问题所在原因及解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 深入了解Vue.js中的Vuex状态管理模式

    深入了解Vue.js中的Vuex状态管理模式

    Vuex是Vue.js的官方状态管理模式,它为Vue.js应用程序提供了一个集中式的状态管理解决方案,Vuex可以帮助我们管理应用程序中所有组件的状态,使得状态管理变得更加简单和可靠,需要详细了解可以参考下文
    2023-05-05
  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • Vue防止白屏添加首屏动画的实例

    Vue防止白屏添加首屏动画的实例

    今天小编就为大家分享一篇Vue防止白屏添加首屏动画的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论