Element组件库tabs标签页标题拓展

截图1

截图2（‘用户管理标题变蓝色是hover效果，因为截图，看不到鼠标在在那里’）

上两个图中的实现效果就是：tabs标签页第二个标题点击后有下拉框，对应的同一类型中的不同数据，进而展示不同的内容（手动捂脸：需求提的，作为开发也很无奈啊，你们懂得）

代码部分

    <template>
    <div class="main">
        <el-tabs
        tab-position = "left"
        style        = "height: 200px;"
        >
        <el-tab-pane label="用户管理">用户管理</el-tab-pane>
        <!-- Start -->
        <el-tab-pane>
            <span slot="label">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                {{title}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="img">缺陷图片</el-dropdown-item>
                <el-dropdown-item command="mp4">缺陷视频</el-dropdown-item>
                <el-dropdown-item command="mp3">缺陷音频</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </span>
            <!-- 下面是展示图片，视频或者音频的盒子，可以写三个盒子，分别是图片视频音频，用v-show切换 -->
            <div class="inner_content">
            {{name}}
            </div>
        </el-tab-pane>
        <!-- End -->
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>
    </template>

    <script>
    /* eslint-disable */
    export default {
    name: "Angular",
    data() {
        return {
        title: "缺陷图片",
        name : "假装这里有图片 "
        };
    },
    methods: {
        handleCommand(command) {
        let   _this = this;
        const map   = new Map([
            [
            "img",
            () => {
                _this.title = "缺陷图片";
                _this.name  = "假装这里有图片";
            }
            ],
            [
            "mp4",
            () => {
                _this.title = "缺陷视频";
                _this.name  = "假装这里有视频";
            }
            ],
            [
            "mp3",
            () => {
                _this.title = "缺陷音频";
                _this.name  = "假装这里有音频";
            }
            ]
        ]);
        map.get(command)();
        }
    }
    };
    </script>
    <style scoped>
    .main {
    width           : 100%;
    height          : 500px;
    background-color: #dadada;
    }
    .el-dropdown {
    display  : inline-block;
    position : relative;
    color    : #080808;
    font-size: 14px;
    }
    .inner_content {
    width      : 100%;
    height     : 200px;
    font-size  : 80px;
    text-align : center;
    line-height: 200px;
    font-weight: 800;
    }
    </style>

主要利用了组件库中现有的组件进行拼装，然后传入参数，出发map数据中定义的方法