设置出始值
.el-tabs__item{
background-color:#cccccc !important;
color:#666666; !important;
margin: 5px; !important;
}
设置点击activeName变色的值
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
color:#e64545 !important;
}
就只写这么多 任性 哈哈
div部分
<button class="showInputclass"> 稿件管理</button>
<button class="showInputclass" @click="showInputone" v-if="buttonshoucangif"> +添加收藏夹 </button>
<div class="showInputonewropclass">
<input type="text" v-model="vmodelinputh" v-if="showInputoneif" class="inputshou">
<button @click="addTab(editableTabsValue2)" class="showInputoneclass" v-if="showInputoneif">
完成
</button>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item, index) in editableTabs2"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
VUE.JS部分
data:{
editableTabsValue2: '1',
editableTabs2: [{
title:"默认收藏夹" ,
name: '1',
content: 'Tab默认收藏夹'
},
{
title: '收藏夹1',
name: '2',
content: 'Tab收藏夹1内荣'
}
],
tabIndex: 2,
vmodelinputh:"",
}
methods:{
showInputone(){
this.showInputoneif=true
},
addTab(targetName) {
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: this.vmodelinputh,
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue2 = newTabName;
this.buttonshoucangif=false
this.vmodelinputh=""
},
removeTab(targetName){
let tabs = this.editableTabs2;
let activeName = this.editableTabsValue2;
if (activeName === targetName) {
alert("确定删除收藏夹吗")
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
}
},
}
