直接看代碼如下：BigForm.vue和ChildTabForm.vue

BigForm.vue

<template>
  <div class="big-from">
    <el-form ref="postForm" :model="postForm" class="form-container">
      <div class="task-basic-info module-spliter">
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="80px" label="任務(wù)名稱:">
              <el-input v-model="postForm.taskName" placeholder="請輸入任務(wù)名稱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div class="child-tab-form">
      <el-tabs v-model="editableTabsValue" type="card" editable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item) in postForm.tabFroms"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <child-tab-form :detailForm="item" />
        </el-tab-pane>
      </el-tabs>

      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script>
import ChildTabForm from "./ChildTabForm";

const defaultForm = {
  taskName: "",

  tabFroms: []
};

export default {
  name: "BigForm",

  components: { ChildTabForm },

  data() {
    return {
      editableTabsValue: "",

      postForm: Object.assign({}, defaultForm)
    };
  },

  methods: {
    handleAddAction(name) {
      this.postForm.tabFroms.push(
        Object.assign({}, { name: name, title: name, address: name })
      );

      this.editableTabsValue = name;
    },

    removeTab(targetName) {
      const tabs = this.postForm.tabFroms;

      let activeName = this.editableTabsValue;

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];

            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;

      this.postForm.tabFroms = tabs.filter(tab => tab.name !== targetName);
    },

    submitForm() {
      console.log(this.postForm);

      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true;

          this.$notify({
            title: "成功",

            message: "發(fā)布文章成功",

            type: "success",

            duration: 2000
          });

          this.postForm.status = "published";

          this.loading = false;
        } else {
          console.log("error submit!!");

          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

ChildTabForm.vue

<template>
  <div class="child-tab-form">
    <el-form :model="detailForm">
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="120px" label="姓名:" prop="name">
            <el-input v-model="detailForm.name" placeholder="請輸入姓名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "ChildTabForm",
  data() {
    return {};
  },
  props: {
    detailForm: Object
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
</style>