el-tabs如何切换组件，动态切换

昭昭是饺子大王

已于 2023-12-06 14:28:57 修改

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：工作解决问题文章标签： vue.js elementui javascript

于 2023-12-06 14:22:56 首次发布

本文链接：https://blog.csdn.net/ZZZZZZZZjy/article/details/134830537

工作解决问题专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在Vue中如何使用el-tabs组件实现树形节点点击后动态切换tabs，以及如何利用v-if和动态导入组件来控制组件的渲染。同时提到了loading和delay属性在控制组件加载效果中的应用。

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

1.场景是点击左边tree的节点，tabs可以动态切换

        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane
            v-for="item in ComponentArr"
            :key="item.key"
            :label="item.label"
            :name="item.name"
          >
            <keep-alive>
              <!-- v-if="activeName === item.name" -->
              <component
                :is="item.components"
                v-if="activeName === item.name"
                :ref="item.name"
                @hook:created="myCreated"
                @seach="seach"
                @reset="reset"
              />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>

v-if用于根据条件判断是否渲染指定的元素或组件，里的条件是"activeName === item.name"，即当组件的name属性值与当前激活的标签页名称(activeName)相同时，才渲染该组件。而v-bind(:)用于动态绑定属性值，这里的属性是"is"，它指定了要渲染的组件类型，即item.components，表示渲染当前标签页对应的组件。