tabs标签页

weixin_46852620

于 2021-02-05 12:57:09 发布

阅读量151

点赞数

分类专栏： elementUI

本文链接：https://blog.youkuaiyun.com/weixin_46852620/article/details/113691119

版权

elementUI 专栏收录该内容

25 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中使用el-tabs组件来创建用户管理和配置管理的选项卡，并通过v-model和@tab-click事件实现内容切换。示例代码展示了如何初始化activeName为'second'，并监听标签点击事件进行相应处理。

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

<!-- activeName：选择的标签name值 -->
<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick() {
        console.log(this.activeName);
      }
    }
  };
</script>