tabpane1联动html,vue 使用element 菜单与tab页联动(示例代码)

{{item.menuName}}

{{data.name}}

exportdefault{

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);

}

}

};