纪检部门网站举报建设,网站介绍模板,专业网站建设制作公司,app开发公司名称需求: 前端进行新增表单时#xff0c;同时增加表单的明细数据。明细数据部分#xff0c;通过弹框方式增加或者编辑。 效果图#xff1a; 代码#xff1a; !-- 新增主表弹窗 Begin --el-dialog:titletitleInfotop5vhcenterwidth…需求: 前端进行新增表单时同时增加表单的明细数据。明细数据部分通过弹框方式增加或者编辑。 效果图 代码 !-- 新增主表弹窗 Begin --el-dialog:titletitleInfotop5vhcenterwidth85%:close-on-click-modalfalse:close-on-press-escapefalse:visible.syncdialogVisiblespanel-formrefform:rulesformRules:modelformstylemargin: 0 autolabel-width32%el-row :gutter24el-col :span12el-form-item label申请日期: propapplyDateel-date-pickerv-modelform.applyDatestylewidth: 80%clearabletypedatevalue-formatyyyy-MM-ddplaceholder请选择申请日期//el-form-item/el-colel-col :span12el-col :span14el-form-itempropapplyDeptlabel申请部门:label-width30%el-selectv-modelform.applyDeptstylewidth: 80%:disabledtrueel-optionv-foritem in deptLists:keyitem.id:labelitem.departName:valueitem.orgCode//el-select/el-form-item/el-colel-col :span10el-form-itempropapplyUsernamelabel申请人:label-width30%el-inputv-modelform.applyUsernamestylewidth: 70%:disabledtrue//el-form-item/el-col/el-col/el-row/el-formel-carddiv slotheaderspan stylefont-weight: bold外来人员名单/spanel-buttonstylefloat: righttypeprimaryclickinsertExterRow添加/el-button/divel-tablerefexterTablealigncenterhighlight-cellkeep-sourcestripeborderstylewidth: 100%max-height400:dataexterTableData:edit-config{ trigger: click, mode: row, showStatus: true }el-table-column propuseUser label姓名 aligncenter /el-table-column propidCard label身份证号 aligncenter /el-table-column propphone label手机号 aligncenter /el-table-column label操作 aligncenter width220template slot-scopescopeel-buttonmodetexticonel-icon-editclickeditExterRow(scope.$index, scope.row)/el-buttonmodetexticonel-icon-deleteclickremoveExterRow(scope.$index, scope.row)//template/el-table-column/el-table/el-card/spanspan slotfooter classdialog-footerel-button clickcancel取消/el-buttonel-button typesuccess :loadingsaveLoading clicksave保存/el-button/span/el-dialog!-- 新增主表弹窗 End --!-- 外来人员弹窗 Start--el-dialog:titleexterTitleInfotop5vhcenterwidth50%:close-on-click-modalfalse:close-on-press-escapefalse:visible.syncexterDialogVisiblespanel-formrefexterForm:rulesexterFormRules:modelexterFormstylemargin: 0 autolabel-width25%el-row :gutter24el-col :span24el-form-item label姓名: propuseUserel-inputv-modelexterForm.useUserplaceholder请输入姓名stylewidth: 80%//el-form-item/el-col/el-rowel-row :gutter24el-col :span24el-form-item label身份证号: propidCardel-inputv-modelexterForm.idCardplaceholder请输入身份证号stylewidth: 80%//el-form-item/el-col/el-rowel-row :gutter24el-col :span24el-form-item label手机号: propphoneel-inputv-modelexterForm.phoneplaceholder请输入手机号stylewidth: 80%//el-form-item/el-col/el-row/el-form/spanspan slotfooter classdialog-footerel-button clickcancelExter取消/el-buttonel-button typesuccess :loadingexterSaveLoading clicksaveExter保存/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}}
}
