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