使用Tabs 標簽頁的label插槽,嵌入Dropdown 下拉菜單,實現Tabs 標簽頁增加下拉切換功能
Tabs 標簽頁
?@tab-click="事件"(這個事件當中到擁有下拉框的tab里時,可以存一下Dropdown 第一個菜單的id,實現點擊到擁有下拉框的tab時執行Dropdown 菜單值的查詢)
Dropdown 下拉菜單
?@command="事件"(這個事件里點擊時,直接將Tabs 綁定的v-model值設置為擁有下拉框的tab ID,實現點擊Dropdown 菜單時,切換到指定的Tab頁)
可以考慮不使用 Dropdown 菜單 手搓一個類似功能的dom,這樣方便增加下拉時,下拉菜單是選中,目前我是把選中的下拉菜單名,放入的tab中進行展示,實現區分在哪個下拉菜單中
代碼(vue2、vue3同一個思路)
//簡易版<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-dropdown placement="bottom" @command="handleAllExamList"><span class="el-dropdown-link">下拉菜單<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>黃金糕</el-dropdown-item><el-dropdown-item>獅子頭</el-dropdown-item><el-dropdown-item>螺螄粉</el-dropdown-item><el-dropdown-item disabled>雙皮奶</el-dropdown-item><el-dropdown-item divided>蚵仔煎</el-dropdown-item></el-dropdown-menu></el-dropdown></el-tab-pane></el-tabs>//循環版
<el-tabs v-model="activeOne" @tab-click="tabsClick"><el-tab-pane :name="tab.value" v-for="(tab, index) in tabList":key="index"><span slot="label" v-if="tab.name == '下拉菜單'"><el-dropdown placement="bottom" @command="handleAllExamList"><label class="zsk-css">{{ tab.name }}<span v-if="dropdownDX">({{ dropdownDX.name }})</span> <i class="el-icon-arrow-down el-icon--right"></i></label><el-dropdown-menu slot="dropdown"><el-dropdown-item v-for="menu in dropdownMenu" :key="menu.value":command="menu.value">{{ menu.name }}</el-dropdown-item></el-dropdown-menu></el-dropdown></span><span slot="label" v-else>{{ tab.name }}</span></el-tab-pane>
</el-tabs>