Element-ui Tabs 标签页

Element-ui Tabs 标签页

原文链接：https://note.noxussj.top/?source=sifo

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

---

按需引入方式

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

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

---

Tab-pane Attributes

---

原文链接：https://note.noxussj.top/?source=sifo