欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中el-table組件重復(fù)渲染的問(wèn)題以及解決

 更新時(shí)間：2025年06月18日 09:53:26   作者：Noimpty—08027  
這篇文章主要介紹了Vue3中el-table組件重復(fù)渲染的問(wèn)題以及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3 el-table組件重復(fù)渲染的解決

寫(xiě)好頁(yè)面后進(jìn)行測(cè)試發(fā)現(xiàn)點(diǎn)擊左側(cè)側(cè)邊欄下面的子頁(yè)面會(huì)出現(xiàn)渲染多個(gè)表格發(fā)生，如下圖：

困擾了我好久。接著我就猜測(cè)可能是路由配置或者緩存的問(wèn)題。于是……deepseek是個(gè)好東西。我就去問(wèn)了deepseek。

給出了解決辦法：

1. 修改路由視圖部分代碼

<router-view v-slot="{ Component, route }">
  <transition name="el-zoom-in-center" mode="out-in">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </transition>
</router-view>

2. 添加 cachedViews 管理

在 script 部分添加：

const cachedViews = ref(['Home']) // 只緩存需要緩存的組件名

// 在 changeMenu 和 changeRouter 方法中管理緩存
function changeMenu(ly) {
  if (!cachedViews.value.includes(ly.name)) {
    cachedViews.value.push(ly.name)
  }
  // 其他原有邏輯...
}

3. 確保路由組件有唯一 name

在您的路由配置中，確保每個(gè)路由組件都有唯一的 name 屬性：

// router/index.js
{
  path: '/table',
  name: 'UniqueTableName', // 必須唯一
  component: () => import('@/views/Table.vue'),
  meta: { title: '表格頁(yè)' }
}

這樣問(wèn)題就被解決了！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論