Navigation-Tabs标签页

<!--Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。
Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。-->
<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
  <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿内容</el-tab-pane>
</el-tabs>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  })
</script>

Tabs Attributes

参数	说明	类型	可选值	默认值
type	风格类型	string	card/border-card	—
value	绑定值，选中选项卡的 name	string	—	第一个选项卡的 name

Tabs Events

事件名称	说明	回调参数
tab-click	tab 被选中时触发	被选中的标签 tab 实例

Tab-pane Attributes

参数	说明	类型	可选值	默认值
label	选项卡标题	string	—	—
name	与选项卡 activeName 对应的标识符，表示选项卡别名	string	—	该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'