教你如何解決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">         透過              < popover>         < div @click="handleLog(row)">檢視日誌       < /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>             < 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>           < 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>           < 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 scoped> .trigger {   display: contents; } < /style>

現在，在這個例子中：

• popvoer以單例形式存在，不會出現400行就渲染上千個popover元件這樣的情況
• 需要一些中間狀態儲存相關狀態和資料
• 不同的觸發內容外套一層div.trigger用以去解決觸發和關閉popper的衝突（當需要用到外部點選去關閉popover的時候）

到此這篇關於el-table巢狀el-popover處理卡頓的解決的文章就介紹到這了。

原文來自：