Got a reusable form yesterday, today and then put it in a popup window on the inside, a lot of small partners must have done similar things, always want to edit or add data list, and then bring up a form, edit, and then submit the background, we have today to encapsulate the next time to do it,, you can configure it is easy to generate a form data window, how good. Here’s a picture for you:

How’s it going? Doesn’t it look good. I won’t talk about form encapsulation, as I did in the last article. Add a method to the form today that clears the reset form after submission. Let’s start with one in our form component methods

ResetForm (){this.$refs['customForm'].resetFields(); },Copy the code

Then we’ll wrap the popover form component first. Similar to the table popover, let’s define the properties of the popover and then add dialogForm, a data object that the form needs. Note that the isHandle action bar property in the wrapped form is set to false because the popover has an action bar, which we use for the business callback. Other popover properties and methods are basically the same as table popovers.

<template> <div> <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :center="isCenter" :fullscreen="isFull" :destroy-on-close="true" > <! -- :before-close="handleClose" --> <! -- Here is the form component, <custom-form :myForm="dialogForm.myForm" :isHandle="false" :formData="dialogForm.formData" ref="dynamic" :inline="false" v-on="$listeners"> </custom-form> <span slot="footer" class="dialog-footer"> <el-button </el-button> <el-button :loading="vLoading" type="primary" @click="clickDialog" </el-button> </span> </el-dialog> </div> </template> <script> import CustomForm from '@/mycomponents/CustomForm/index.vue' export default { inheritAttrs:false, components:{ CustomForm }, DialogForm :{type:Object, default:false,}, dialogForm:{type:Object, default:()=>{}}, Visible :{type:Boolean, default:false,}, // Popover title:{type:String, default:' title '}, IsCenter :{type:String, default:'50%'}, isCenter:{type:Boolean, default:false}, // Whether popup displays isFull:{type:Boolean, default:false},}, computed:{dialogVisible: {get() {return this.visible}, set(val) {this.$emit('update:visible', val)}}, // confirm button loading event vLoading: { get() { return this.loading }, set(val) { this.$emit('update:load', val) } } }, HandleClose (){this.$emit('beforeclose','close')}, Async clickDialog(){// Verify first, and then verify by notifying the parent of the currently filled data, Let flag = await this.$refs.dynamic.submitForm(); if(flag){ this.$emit('update:loading', true) let val = {... this.dialogForm.myForm} this.$emit('handleconfirm',val); } }, } } </script>Copy the code

Then we look at the page using:

<template> <div class="pages-container"> <el-button type="primary" @click="openDoor" ref="dialogs" :title="dialogConfig.title" :visible.sync="dialogConfig.visible" :width="dialogConfig.width" :dialogForm="dialogForm" :loading.sync="dialogConfig.loading" @handleconfirm="confirm" > </form-dialog> </div> </template>Copy the code

We found a dialogForm attribute in the page. This is the form data that we passed when using it. We then define a ref to find the refs reset method of our form to reset the form after successful submission. This.$refs[formName].resetFields(); this.$refs[formName].resetFields() Select components, etc.) data, and there will be verification results shown below. Hate it. ResetFields () is used to reset table entries to their original values and remove validation results. This method is not used to clear the table.

< script > import FormDialog from '@ / mycomponents/Dialog/form. The vue' / / defined in dialogForm good form we need the configuration data import from {dialogForm} './ conconst. Js' // introduces a method for emptying the form, iterating through it, and then differentiating between object property values of ordinary string and array types, Import {clearObject} from '@/utils/index.js' export default {components:{FormDialog}, Data (){return {dialogForm:dialogForm, dialogConfig:{width:'800px', title:' table popup title ', visible:false, loading:false, }}}, / / popup window configuration, the methods: {/ / open the form pop-up openDoor () {this. DialogConfig. Visible = true; }, // Popup click ok to get data and submit it to background successfully, close loading and popup, Empty form to confirm (val) {setTimeout (() = > {/ / closed loading enclosing dialogConfig. Loading = false; / / close the Windows Before that get sent to the background of backwardness val business callback enclosing dialogConfig. Visible = false; $ref = this.$refs.dialogs.$refs.dynamic; // encapsulates the empty form method (// loops through object properties, resetting each property value to null;) clearObject(this.dialogForm.myForm,this,ref).then(); console.log(val); },3000) }, } } </script>Copy the code

We saw a method mentioned above that clears the value of an object property, so let me write this code here

//obj is the form object we want to empty; $nextTick ($nextTick); $nextTick ($nextTick); $nextTick ($nextTick); export function clearObject(obj,_this,ref){ let data = {... obj} for (var key in data){ if(data[key].isArray){ data[key] = [] }else{ data[key] = '' } }; _this.myForm = data; _this.$nextTick(()=>{ ref.resetForm(); }) return Promise.resolve(data) }Copy the code

Okay, so at this point, our form popover is wrapped. Come back to a similar page, finish it easily, and the rest of the time we can quietly fish. If you think it is helpful, please click “like”, thanks!!