vue elementui table编辑表单时，弹框增加编辑明细数据

需求:
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：

代码：

   <!-- 新增主表弹窗 Begin -->
    <el-dialog
      :title="titleInfo"
      top="5vh"
      center
      width="85%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
    >
      <span>
        <el-form
          ref="form"
          :rules="formRules"
          :model="form"
          style="margin: 0 auto"
          label-width="32%"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="申请日期:" prop="applyDate">
                <el-date-picker
                  v-model="form.applyDate"
                  style="width: 80%"
                  clearable
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择申请日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-col :span="14">
                <el-form-item
                  prop="applyDept"
                  label="申请部门:"
                  label-width="30%"
                >
                  <el-select
                    v-model="form.applyDept"
                    style="width: 80%"
                    :disabled="true"
                  >
                    <el-option
                      v-for="item in deptLists"
                      :key="item.id"
                      :label="item.departName"
                      :value="item.orgCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  prop="applyUsername"
                  label="申请人:"
                  label-width="30%"
                >
                  <el-input
                    v-model="form.applyUsername"
                    style="width: 70%"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>

        <el-card>
          <div slot="header">
            <span style="font-weight: bold">外来人员名单</span>
            <el-button
              style="float: right"
              type="primary"
              @click="insertExterRow"
              >添加</el-button
            >
          </div>
          <el-table
            ref="exterTable"
            align="center"
            highlight-cell
            keep-source
            stripe
            border
            style="width: 100%"
            max-height="400"
            :data="exterTableData"
            :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
          >
            <el-table-column prop="useUser" label="姓名" align="center" />
            <el-table-column prop="idCard" label="身份证号" align="center" />
            <el-table-column prop="phone" label="手机号" align="center" />
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button
                  mode="text"
                  icon="el-icon-edit"
                  @click="editExterRow(scope.$index, scope.row)"
                />
                <el-button
                  mode="text"
                  icon="el-icon-delete"
                  @click="removeExterRow(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="success" :loading="saveLoading" @click="save"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增主表弹窗 End -->
    
    <!-- 外来人员弹窗 Start-->
    <el-dialog
      :title="exterTitleInfo"
      top="5vh"
      center
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="exterDialogVisible"
    >
      <span>
        <el-form
          ref="exterForm"
          :rules="exterFormRules"
          :model="exterForm"
          style="margin: 0 auto"
          label-width="25%"
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="姓名:" prop="useUser">
                <el-input
                  v-model="exterForm.useUser"
                  placeholder="请输入姓名"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="身份证号:" prop="idCard">
                <el-input
                  v-model="exterForm.idCard"
                  placeholder="请输入身份证号"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="手机号:" prop="phone">
                <el-input
                  v-model="exterForm.phone"
                  placeholder="请输入手机号"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExter">取消</el-button>
        <el-button type="success" :loading="exterSaveLoading" @click="saveExter"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!--外来人员弹窗 End-->

export default {
  data() {
    return {
      // 表单
      form: {},
      exterForm: {},
      exterTableData: [],
      //form表单验证规则
      exterFormRules: {}
    }
  },
  methods: {
   // 添加一行，外来人员信息
    insertExterRow() {
      this.exterTitleInfo = '外来人员信息新增'
      this.exterForm = {}
      this.exterDialogVisible = true
      this.selectExterRow = null
      this.$nextTick(() => {
        this.$refs.exterForm.clearValidate() // 移除校验结果
      })
    },
    // 编辑一行，外来人员信息
    editExterRow(index, row) {
      this.exterTitleInfo = '外来人员信息编辑'
      this.exterDialogVisible = true
      this.selectExterRow = row
      this.exterForm = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs.exterForm.clearValidate() // 移除校验结果
      })
    },
    // 删除一行，外来人员信息
    removeExterRow(index, row) {
      this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.exterTableData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 保存外来人员信息
    saveExter() {
      this.$refs.exterForm.validate((valid) => {
        if (valid) {
          this.exterSaveLoading = true
          if (this.selectExterRow) {
            Object.assign(this.selectExterRow, this.exterForm)
          } else {
            this.exterTableData.push(this.exterForm)
          }
          this.exterSaveLoading = false
          this.exterDialogVisible = false
        } else {
          return false
        }
      })
    },
    cancelExter() {
      this.exterForm = {}
      this.exterDialogVisible = false
    }
  }
}