需求:
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，通过弹框方式增加或者编辑。
效果图：
代码：
javascript
<!-- 新增主表弹窗 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
}
}
}