Element UI 之 Tabs 栏下拉菜单的实现

产品小姐姐有一个业务需求，Tabs 组件某个 Tab 为 下拉菜单，效果如下：

业务代码比较多，这里弄了一个小 Demo，以供参考，效果如下：

一、思路

1. 通过 el-tab-pane 的 name 值判断为是否指定下拉 tab 栏
2. 然后利用组件提供的具名 slot 嵌入 el-dropdown 组件
3. 在 el-dropdown 中通过双向绑定，实现单选或多选（PS: 多选实现，需要设置菜单隐藏方式。涉及样式代码较多，本文没有弄这一步）

二、完整代码

<template>
  <el-tabs v-model="activeName" type="card">
    <template v-for="tab in tabMenu">
      <el-tab-pane
        v-if="tab.name !== 'software engineer'"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        {{ tab.value }}
      </el-tab-pane>
      <el-tab-pane v-else :key="tab.name">
        <span slot="label">
          <el-dropdown placement="bottom" @command="handleCommand">
            <span>{{ tab.label }}</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>
        {{ selected === '' ? '无' : dropdownValueMap[selected] }}
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script>
const tabMenu = [
  {
    label: '快递员',
    name: 'courier',
    value: '王卫'
  },
  {
    label: '送餐员',
    name: 'delivery man',
    value: '王兴'
  },
  {
    label: '软件工程师',
    name: 'software engineer'
  }
]

const dropdownMenu = [
  {
    label: '前端工程师',
    command: 'front-end engineer',
    value: '尤小右'
  },
  {
    label: '后端工程师',
    command: 'back-end engineer',
    value: '马士兵'
  },
  {
    label: '全沾工程师',
    command: 'full stack engineer',
    value: '李哈哈'
  }
]

const dropdownValueMap = {
  'front-end engineer': '尤小右',
  'back-end engineer': '马士兵',
  'full stack engineer': '李哈哈'
}

export default {
  name: 'Home',
  data () {
    return {
      tabMenu,
      dropdownMenu,
      dropdownValueMap,
      activeName: 'courier',
      selected: ''
    }
  },
  methods: {
    handleCommand (dropdownItem) {
      this.selected = dropdownItem
    }
  }
}
</script>