html ui多页签,vue+elementUI实现类似浏览器打开网页的功能（页签功能）

{{"切换-"+nav.label}}

{{tab.label}}

export default {

mounted() {

console.log("hello");

},

computed: {},

data() {

return {

activeName: "first",

tabs: [

],

navs: [

{

label: "用户管理",

name: "first"

},

{

label: "配置管理",

name: "second"

},

{

label: "角色管理",

name: "third"

},

{

label: "定时任务补偿",

name: "fourth"

}

]

};

},

methods: {

handleClick(tab, event) {

console.log(tab, event);

},

change(index) {

var currData = this.navs[index];

for (let x = 0; x < this.tabs.length; x++) {

const tab = this.tabs[x];

if(tab.name == currData.name){

this.activeName = tab.name;

return;

}else{

console.log("重复了～");

}

}

this.tabs.push(currData);

this.activeName = this.tabs[this.tabs.length-1].name;

}

}

};

.card-block-welcome img {

width: 100%;

border: 1rem solid #fff;

padding: 0 !important;

}

.welcome_bg {

background-color: #fff;

}