element tab 动态生成整个表单

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);
        }

      }
    },