VUE + ElementUI制作tab切换（切换vue组件，踩坑总结）

Java-云海

已于 2022-06-20 23:30:17 修改

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： vue tab ElementUI Echarts ui

于 2019-12-19 11:13:57 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/k_love1219/article/details/103610998

本文介绍了在Vue项目中利用ElementUI实现tab切换功能，详细讲解了创建tabZujian.vue、tabZujianChild1.vue、tabZujianChild2.vue三个文件的过程，以及在遇到子组件重新渲染问题时的解决方案。通过设置变量并使用v-if控制组件渲染，成功实现了tab切换时子组件的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发项目中过程中用到了一个页面要实现tab切换实现报表展示，自行百度了一下；最后实现效果，在这里总结一下把步骤分享给大家！

1、创建文件

1.1、tabZujian.vue

1.2、tabZujianChild1.vue

1.3、tabZujianChild2.vue

2、界面展示

3、问题解决

3.1、更改tabZujian.vue

接下来开始正题...

1、创建文件

1.1、tabZujian.vue

代码如下：

<template>
    <div class="tabZujian">
        <el-tabs v-model="activeName">
            <el-tab-pane label="tab1" name="first" :key="'first'">
                <child1></child1>
            </el-tab-pane>
    
            <el-tab-pane label="tab2" name="second" :key="'second'">
                <child2></child2>    
            </el-tab-pane>

最低0.47元/天解锁文章