Tabs 标签页

用于分割多种状态下不同的展示内容。

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Tabs, TabPane } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/tabs.css'
import 'element-ui/lib/theme-chalk/tabs-pane.css'

Vue.use(Tabs)
Vue.use(TabPane)

基础使用

<template>
    <el-tabs v-model="activeName">
        <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-tabs>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first'
        }
    }
}
</script>

Tabs Attributes

参数	说明	类型	默认值
v-model	绑定值	string
...

Tab-pane Attributes

参数	说明	类型	默认值
label	选项卡标题	string
name	选项卡对应的值	string
...