點擊此處直達應用場景示例

---

官網：https://element.eleme.cn/#/zh-CN/component/form

補充：改變表頭顏色：

<el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#d3dce6',color:'#606266'}" v-loading="loading">

---

一、表單提交后，發現表單中的數據沒有清空。兩種實現方法：

（1）官網中提供的重置方法：this.$refs['formName'].resetFields();
（2）清空數據： this.$refs['formName'].clearValidate();
（3）常用示例 ：

<el-form :model="formData" :rules="rules" ref="formData">if(this.$refs.formData){this.$refs.formData.resetFields(); }

二、解決點擊編輯彈框，再點擊添加填彈框，表單數據無法清空問題

1. 此方法有效，但是如果打開修改彈框后再添加，確認添加后會多一個打開彈框時的 id 字段。

//打開彈框清空表單，并將數據保存到彈框中的 addForm 中 <el-dialog :title="dialogTitle" :visible.sync="isDialog" width="620px" v-if="isDialog"><el-form :inline="true" :model="addForm" :rules="rules" ref="addForm" size="mini" class="myStyle" label-width="100px" ><el-form-item label="模板名稱" prop="templateName"><el-input v-model="addForm.templateName" placeholder="請輸入模板名稱" class="nobr"></el-input></el-form-item><el-form-item label="模板網址" prop="templateUrl"><el-input v-model="addForm.templateUrl" placeholder="請輸入模板網址" class="nobr"></el-input></el-form-item><el-form-item label="模板簡介" prop="templateDesc"><el-input v-model="addForm.templateDesc" required placeholder="請輸入模板簡介" class="nobr"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="isDialog=false" class="myStyle" size="mini">取 消</el-button><el-button type="primary" @click="onSubmit()" class="myStyle" size="mini">確 定</el-button></div> </el-dialog>data(){return {isDialog: false,openDialogName: "", //用來判斷打開的彈框是屬于添加or修改dialogTitle: "", //彈框標題addForm: {templateName: "",templateUrl: "",templateDesc: ""},rules: {templateName: [{ required: true, message: "此項不能為空", trigger: "blur" }],templateUrl: [{ required: true, message: "此項不能為空", trigger: "blur" }],templateDesc: [{ required: true, message: "此項不能為空", trigger: "blur" }]}} },methods: {openDialog(formName, data) { //清空表單數據 this.$nextTick(() => {if(this.$refs.addForm){//this.$refs.addForm.clearValidate();this.$refs.addForm.resetFields();//個人喜愛。clearValidate有時候驗證清不掉，具體原因暫時沒找到} })for(let key in this.addForm){this.addForm[key]=""; //注意初始值的數據類型為數字、數組等其他類型的，需要在循環外補充。}delete this.addForm.id; //修改彈框給this.addForm新增的id字段//this.addForm.raios = 0; //示例this.openDialogName = formName; //賦值，提交時將用到該變量this.isDialog = true; if (formName === "addForm") {this.dialogTitle = '新增XXX信息';} else if (formName === "updateForm") {this.dialogTitle = '修改XXX信息';let { id, templateName, templateUrl, templateDesc } = data;this.addForm = { id, templateName, templateUrl, templateDesc }; //這一步是將表格中的數據賦值給綁定的addForm}},//提交添加、修改onSubmit() {this.$refs.addForm.validate((valid) => {if ( valid ) { this.addDialog = false;if(this.openDialogName === 'addForm'){//-----添加時的操作-----} else if(this.openDialogName === 'updateForm'){ //-----修改時的操作-----} } else {return false;}}) ;}, }

2. 刪除 json 中指定的某個字段：delete、splice、filter。
簡單說一下這3個的用法：

//delete const Employee = {firstname: 'John',lastname: 'Doe' }; delete Employee.firstname;//splice Employee.splice(0,1); //splice(指定位置（從0開始，指定位置包括自身）, 刪除個數, 新增內容)//filter Employee = Employee.filter( (e)=>{return e.firstname!=='John';} )

3. 如果使用上述方法，還是不能清空表單（比如下拉框數據改變，但是頁面上不變），可以在彈框中加 v-if 語句，會有意想不到的結果哦。

<el-dialog :title="dialogTitle" :visible.sync="isDialog" width="620px" v-if="isDialog"> </el-dialog>

4. 當數據太少時，上面的解決方法顯得大材小用，可以直接賦初始值。

//將這段代碼用下面的代碼代替 this.$nextTick(() => {if(this.$refs.addForm){this.$refs.addForm.clearValidate();} }) for(let key in this.addForm){this.addForm[key]=""; } delete this.addForm.id; //將這段代碼用下面的代碼代替if(this.$refs.addForm){ this.$refs.addForm.resetFields(); }; this.addForm = {systemName: "" };

總結

以上是生活随笔為你收集整理的elementUI清空弹框中的表单数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。