快捷導(dǎo)航

el-table嵌套el-popover處理卡頓的解決

更新時(shí)間：2022年05月29日 10:39:30 作者：偶爾吃麻辣燙

本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一個(gè)常見(jiàn)的場(chǎng)景是在表格行內(nèi)以el-popover的形式對(duì)行內(nèi)信息進(jìn)行一些業(yè)務(wù)操作。在表格分頁(yè)10條、20條的情況下頁(yè)面運(yùn)行良好，但是在分頁(yè)400條的時(shí)候會(huì)出現(xiàn)肉眼可見(jiàn)的卡頓。原因是表格渲染的popover組件太多了，一行如果至少3個(gè)popover組件，那么400行至少就得渲染1200個(gè)了。下面就是導(dǎo)致卡頓的通常寫法：

<el-table-column label="操作">
  <template #default="{ row }">
      <el-button class="button-main button-h-28">
        通過(guò)
      </el-button>
      <popover>
        <div class="popover-list-item" @click="handleLog(row)">查看日志</div>
      </popover>
  </template>
</el-table-column>

?? 解決方法

el-popover提供了一個(gè)虛擬觸發(fā)的功能，可以將觸發(fā)內(nèi)容和下拉內(nèi)容分開(kāi)，那這樣就可以只用一個(gè)popover組件去涵蓋所有需要用到的場(chǎng)景。像這個(gè)例子：

<template>
  <el-table :date="data">
    <el-table-column label="審核語(yǔ)句" 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)"
            >
              <!-- 觸發(fā)內(nèi)容1 -->
            </div>
          </div>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="情感打標(biāo)結(jié)果" min-width="150">
      <template #default="{ row }">
        <div class="trigger">
          <div
            :ref="ref => (refMap[row.commentId] = ref)"
            @click="handleRef(refMap[row.commentId], row, 0)"
          >
            <!-- 觸發(fā)內(nèi)容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)">
            <!-- 觸發(fā)內(nèi)容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">
      <!-- 業(yè)務(wù)邏輯1 -->
    </template>
    <template v-else-if="popoverType === 0">
      <!-- 業(yè)務(wù)邏輯2 -->
    </template>
    <template v-else>
      <!-- 業(yè)務(wù)邏輯3 -->
    </template>
  </el-popover>
</template>
<script setup>
const emotions = [
    { desc: '好評(píng)', icon: 'icon-xiaolian' },
    { desc: '中評(píng)', icon: 'icon-wubiaoqing' },
    { desc: '差評(píng)', 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) {
    // ...業(yè)務(wù)邏輯1
  } else {
    // ...業(yè)務(wù)邏輯2、3
  }
  visiblePopover.value = true
}
</script>
<style lang="scss" scoped>
.trigger {
  display: contents;
}
</style>

現(xiàn)在，在這個(gè)例子中：

popvoer以單例形式存在，不會(huì)出現(xiàn)400行就渲染上千個(gè)popover組件這樣的情況
需要一些中間狀態(tài)保存相關(guān)狀態(tài)和數(shù)據(jù)
不同的觸發(fā)內(nèi)容外套一層div.trigger用以去解決觸發(fā)和關(guān)閉popper的沖突（當(dāng)需要用到外部點(diǎn)擊去關(guān)閉popover的時(shí)候）

到此這篇關(guān)于el-table嵌套el-popover處理卡頓的解決的文章就介紹到這了,更多相關(guān)el-table嵌套el-popover卡頓內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: