需求:
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：
代码：
<!-- 新增主表弹窗 Begin --><el-dialog:title="titleInfo"top="5vh"centerwidth="85%":close-on-click-modal="false":close-on-press-escape="false":visible.sync="dialogVisible"><span><el-formref="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-pickerv-model="form.applyDate"style="width: 80%"clearabletype="date"value-format="yyyy-MM-dd"placeholder="请选择申请日期"/></el-form-item></el-col><el-col :span="12"><el-col :span="14"><el-form-itemprop="applyDept"label="申请部门:"label-width="30%"><el-selectv-model="form.applyDept"style="width: 80%":disabled="true"><el-optionv-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-itemprop="applyUsername"label="申请人:"label-width="30%"><el-inputv-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-buttonstyle="float: right"type="primary"@click="insertExterRow">添加</el-button></div><el-tableref="exterTable"align="center"highlight-cellkeep-sourcestripeborderstyle="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-buttonmode="text"icon="el-icon-edit"@click="editExterRow(scope.$index, scope.row)"/><el-buttonmode="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"centerwidth="50%":close-on-click-modal="false":close-on-press-escape="false":visible.sync="exterDialogVisible"><span><el-formref="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-inputv-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-inputv-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-inputv-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 = truethis.selectExterRow = nullthis.$nextTick(() => {this.$refs.exterForm.clearValidate() // 移除校验结果})},// 编辑一行，外来人员信息editExterRow(index, row) {this.exterTitleInfo = '外来人员信息编辑'this.exterDialogVisible = truethis.selectExterRow = rowthis.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 = trueif (this.selectExterRow) {Object.assign(this.selectExterRow, this.exterForm)} else {this.exterTableData.push(this.exterForm)}this.exterSaveLoading = falsethis.exterDialogVisible = false} else {return false}})},cancelExter() {this.exterForm = {}this.exterDialogVisible = false}}
}
