产品小姐姐有一个业务需求，Tabs组件某个Tab为 下拉菜单，效果如下：
业务代码比较多，这里弄了一个小 Demo，以供参考，效果如下：
一、思路
通过el-tab-pane的 name 值判断为是否指定下拉 tab 栏然后利用组件提供的具名slot嵌入el-dropdown组件在el-dropdown中通过双向绑定，实现单选或多选（PS: 多选实现，需要设置菜单隐藏方式。涉及样式代码较多，本文没有弄这一步）二、完整代码
<template><el-tabs v-model="activeName" type="card"><template v-for="tab in tabMenu"><el-tab-panev-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-itemv-for="menu in dropdownMenu":key="menu.name":command="mand">{{ 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>
