singleApplicationInformation 为表单组件
<el-tabs v-model="singleEditableTabsValue"
type="card"
editable
@edit="singleHandleTabsEdit">
<el-tab-pane :key="item.name"
v-for="(item, index) in singleEditableTabs"
:label="item.title"
:name="item.name">
<tab-component :is=item.content
ref="singleApplicationInformation"></tab-component>
</el-tab-pane>
</el-tabs>
data定义数据
singleEditableTabsValue: '1',
singleEditableTabs: [{
title: '申请信息1',
name: '1',
content: 'ApplicationInformationForm'
}
],
singleTabIndex: 1,
方法
singleHandleTabsEdit (targetName, action) {
if (action === 'add') {
if (this.singleList.length > 4) {
this.$message.warning(`最多添加5条申请信息数据!`)
return
} else {
let newTabName = ++this.singleTabIndex + '';
let tabTitle = '申请信息' + this.singleTabIndex
this.singleEditableTabs.push({
title: tabTitle,
name: newTabName,
content: 'ApplicationInformationForm'
});
this.singleEditableTabsValue = newTabName;
}
}
if (action === 'remove') {
if (this.singleEditableTabs.length === 1) {
this.$message.warning(`最少保留一个标签!`)
return
} else {
let tabs = this.singleEditableTabs;
let activeName = this.singleEditableTabsValue;
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.singleTabIndex = this.singleTabIndex - 1
}
}
});
}
this.formData.applicationInformationFormList.remove(targetName - 1)
this.singleEditableTabsValue = activeName;
this.singleEditableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
},