菜园前端

Appearance

Tabs 标签页 ​

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

按需引入方式 ​

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

javascript
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)
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)

基础使用 ​

vue
<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>
<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
...