elementui tabs自定義標籤頁 在標籤後面增加添加按鈕問題

本來我想實現這樣的tab切換效果，能刪除和添加

但看了看elementui的文檔，有點不太一樣

 

添加按鈕跑天上去了，所以我就基於原本功能做了一些優化以實現我想要的結果

1.首先在循環的el-tab-pane下面單獨添加一個el-tab-pane，並取一個特別的名字，我叫add

<el-tabs v-model="editableTabsValue" type="card" 
	@tab-remove="removeTab" 
	:before-leave="beforeLeave"
	class="my-tab-pane"
	>
	<el-tab-pane
		v-for="(item, index) in editableTabs"
		:key="item.name"
		:label="item.title"
		:name="item.name"
		closable
	>
	</el-tab-pane>
	<el-tab-pane key="add" name="add" >
		<span slot="label" style="padding: 8px;font-size:20px;font-weight:bold;">
			+
		</span>
	</el-tab-pane>
</el-tabs>

2.data

data() {
  return {
	editableTabsValue: '1',
	currentIndex:1,
	editableTabs: [{
	  title: '活動1',
	  name: '1',
	}],
	tabIndex: 1,
	addIndex:1,
  }
},

3.添加刪除方法

addTab() {
	let newTabIndex = ++this.tabIndex + '';
	this.editableTabs.push({
		title: '活動'+ ++this.addIndex,
		name: newTabIndex,
	});
	this.editableTabsValue = newTabIndex;
	this.currentIndex=newTabIndex;
},
removeTab(targetName) {
	if(this.editableTabs.length<=1){
		return false;
	}
	var self=this;
	let tabs = self.editableTabs;
	let activeName = self.editableTabsValue;
	if (activeName === targetName) {
		tabs.forEach((tab, index) => {
			if (tab.name === targetName) {
				let nextTab = tabs[index + 1] || tabs[index - 1];
				if (nextTab) {
					activeName = nextTab.name;
				}
			}
		});
	}
	self.editableTabsValue = activeName;
	
	self.editableTabs = tabs.filter(tab => tab.name !== targetName);
	
	self.editableTabs.map((tab,index)=>{
		tab.title="活動"+(index+1);
		self.addIndex=(index+1);
	})
	self.currentIndex=self.editableTabsValue;
	self.$message({
						type: 'success',
						message: '刪除成功!'
	});
},
/* 活動標籤切換時觸發 */
beforeLeave(currentName,oldName) {
	var self=this;
	//重點，如果name是add，則什麼都不觸發
	if(currentName=="add"){
		this.addTab()
		return false
	}else{
		this.currentIndex=currentName;
	}
}

總結：

其實添加這個按鈕本質和tab一樣，但是點它不切換標籤，而是調用添加方法。