設置出始值
.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);
? ? ? ? ? ? }
? ? ? ? ? },
}
