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ù)渲染的解決
寫好頁(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)文章
vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
這篇文章主要介紹了vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實(shí)例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
vue組件庫(kù)的在線主題編輯器的實(shí)現(xiàn)思路
這篇文章主要介紹了vue組件庫(kù)的在線主題編輯器的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue彈窗插件實(shí)戰(zhàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
ant-design-vue導(dǎo)航菜單a-menu的使用解讀
這篇文章主要介紹了ant-design-vue導(dǎo)航菜單a-menu的使用解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Vue通過(guò)ref獲取不到$refs問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage的變化
這篇文章主要介紹了詳解vuex結(jié)合localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage的變化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05