脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3中el-table组件重复渲染

Vue3中el-table组件重复渲染的问题以及解决

 更新时间：2025年06月18日 09:53:26   作者：Noimpty—08027  
这篇文章主要介绍了Vue3中el-table组件重复渲染的问题以及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3 el-table组件重复渲染的解决

写好页面后进行测试发现点击左侧侧边栏下面的子页面会出现渲染多个表格发生，如下图：

困扰了我好久。接着我就猜测可能是路由配置或者缓存的问题。于是……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: '表格页' }
}

这样问题就被解决了！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论