沒找到比較好的方法 自己寫了一個

<template><div class="ucen-menubar menu"><div class="sider"><el-menu class="el-menu-vertical-demo siderBar" background-color="#2A2E3C" text-color="#fff"><el-submenu :index="''+index" v-for="(item,index) in menus" :key="index" :class="item.class"><template slot="title"><span class="titleIcon"></span><span>{{item.menuName}}</span></template><el-menu-item :index="index+'-'+num" v-for="(data,num) in item.data" :key="num" @click="addTab(data)"><span :class="data.class"></span><span slot="title">{{data.name}}</span></el-menu-item></el-submenu></el-menu></div><div class="content"><el-tabs v-model="TabsValue" type="card" closable @tab-remove="removeTab"><el-tab-pane v-for="(item, index) in Tabs" :key="item.name" :label="item.title" :name="item.name"><tab-component :is="item.content" :name="item.name"></tab-component></el-tab-pane></el-tabs></div></div> </template> <script> import Vue from "vue"; import Bus from "@/assets/js/vendor/bus.js"; export default {name: "UcenMenubar",props: ["gradfrom", "menus"],components: { appMenu },data() {return {show: false,TabsValue: "",value: "",input: "",Tabs: []};},created() {let that = this;Bus.$on("openNewTab", function(name) {that.openTab(name);}),Bus.$on("NewTab", function(name) {that.openTab(name);});Bus.$on("NewManyTab", function(name) {that.openTabMany(name);//鏈接打開多個頁面});},beforeDestroy() {Bus.$off("openNewTab", name);Bus.$off("NewTab", name);Bus.$off("NewManyTab", name);},methods: {// 打開多個頁面 openTabMany(name) {for (var m = 0; m < this.menus.length; m++) {for (var n = 0; n < this.menus[m].data.length; n++) {var ser = this.menus[m].data;if (ser[n].name == name.name) {this.addTabMany(ser[n], name.tabname);}}}},addTabMany(menu, tabname) {var exist = false;for (var i = 0; i < this.Tabs.length; i++) {if (tabname == this.Tabs[i].title) {exist = true;break;}}if (exist == true) {this.TabsValue = tabname;return;}this.Tabs.push({title: tabname,name: tabname,showItem: menu.showItem,content: menu.component});this.TabsValue = tabname;},// 跳轉頁面 openTab(name) {for (var m = 0; m < this.menus.length; m++) {for (var n = 0; n < this.menus[m].data.length; n++) {var ser = this.menus[m].data;if (ser[n].name == name) {this.addTab(ser[n]);}}}},// 菜單打開頁面 addTab(menu) {var exist = false;for (var i = 0; i < this.Tabs.length; i++) {if (menu.name == this.Tabs[i].name) {exist = true;break;}}if (exist == true) {this.TabsValue = menu.name;return;}this.Tabs.push({title: menu.name,name: menu.name,showItem: menu.showItem,content: menu.component});this.TabsValue = menu.name;},//remove removeTab(targetName) {let tabs = this.Tabs;let activeName = this.TabsValue;if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {activeName = nextTab.name;}}});}this.TabsValue = activeName;this.Tabs = tabs.filter(tab => tab.name !== targetName);}} }; </script> <!-- Add "scoped" attribute to limit CSS to this component only -->

?

轉載于:https://www.cnblogs.com/cindy-hmy/p/9297988.html

總結

以上是生活随笔為你收集整理的vue 使用element 菜单与tab页联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。