Vue3中el-table組件重復渲染的問題以及解決

更新時間：2025年06月18日 09:53:26 作者：Noimpty—08027

這篇文章主要介紹了Vue3中el-table組件重復渲染的問題以及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue3 el-table組件重復渲染的解決

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

困擾了我好久。接著我就猜測可能是路由配置或者緩存的問題。于是……deepseek是個好東西。我就去問了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

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

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

這樣問題就被解決了！

總結(jié)

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

您可能感興趣的文章:

vue?el-date-picker?日期回顯后無法改變問題解決
這篇文章主要介紹了vue?el-date-picker?日期回顯后無法改變問題解決,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
vue3實現(xiàn)多條件搜索功能的示例代碼
搜索功能在后臺管理頁面中非常常見，這篇文章就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能，感興趣的小伙伴可以了解一下
2023-08-08
通過vue-cli來學習修改Webpack多環(huán)境配置和發(fā)布問題
這篇文章主要介紹了隨著Vue-cli來'學'并'改'Webpack之多環(huán)境配置和發(fā)布的相關知識,本文將會根據(jù)一些實際的業(yè)務需求，先學習vue-cli生成的模版，然后在進行相關修改，感興趣的朋友一起跟著小編學習吧
2017-12-12
Vue defineProperty使用教程
Vue通過Object.defineProperty來實現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法）實現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理
2023-01-01
淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定
這篇文章主要介紹了淺析Vue3中通過v-model實現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,需要的朋友可以參考下
2022-12-12
vue時間選擇控件的使用方式
這篇文章主要介紹了vue時間選擇控件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vant的Loading加載動畫組件的使用(通過接口拿數(shù)據(jù)時顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動畫組件的使用,通過接口拿數(shù)據(jù)時顯示加載狀態(tài),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
vue單個元素綁定多個事件問題(例如點擊綁定多個事件方法)
這篇文章主要介紹了vue單個元素綁定多個事件問題(例如點擊綁定多個事件方法)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細介紹了Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
npm?run?dev失敗的簡單解決辦法
最近工作中遇到了npm?run?dev報錯這個問題,通過查找相關資料最終解決了,所以下面這篇文章主要給大家介紹了關于npm?run?dev失敗的詳細解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07