vue页面使用饿了么UI给tabs标题增加下拉选细化分类操作

最近需要将一个之前实现的tabs页面改造，实现每个tabs页再细化按照不同分类展示，第一反应是给每个tabs页中再增加tabs，思来想去总觉得导致页面很冗余不精简。最后决定使用slot插槽来实现这个需求。

因为业务代码较复杂先用饿了么UI官网的案例对比：

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

上面是最基本的tabs页，我的页面实现后是这样：

 关键代码：

页面实现就不放了着重说实现效果与方式，改造后的效果是这样：

每个tabs在鼠标悬停的时候都会展示出更细致的分类，实现方式：

1.代码是在<el-tab-pane这个标签后面用slot具名插槽添加一个<el-dropdown下拉选

2.tab-pane的名称在下面插槽中命名，这里去掉就好 

实现如下：

<el-tabs v-model="activeName" @tab-click="handleClick">

        //tabs的名称在下面插槽中命名，这里去掉就好
        <el-tab-pane name="index">

        //插入内容
          <span slot="label">
        //handleAllExamList方法为点击下拉选中内容后刷新页面执行的方法
          <el-dropdown placement="bottom" @command="handleAllExamList">
            <span>全部考试</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="menu in dropdownMenu"
                :key="menu.name"
                :command="menu.command"
              >
                {{ menu.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
       //内容结束

下拉选这里我是写死的，也可以配置成灵活的，随需求来就行
<script>
const dropdownMenu = [
    {
      label: '水平类',
      command: '3'
    },
    {
      label: '资格类',
      command: '1'
    },
    {
      label: '招聘类',
      command: '2'
    }
  ]
export default {
    data() {
      return {
        dropdownMenu,
      };
    },

点击选择时，这里触发handleAllExamList方法，方法中将页面原来的加载方法重写一遍，传入选择的类型参数，将页面重新赋值展示，这样就实现了这步看似简洁一些的操作：

 算是记录一个小思路，欢迎讨论。