点击此处直达应用场景示例

<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: ""
};

5. 过来补充一下：
再次做项目的时候，发现上面的方法真的很麻烦，而且会忘记，不想老是找以前的项目复制粘贴。于是找到了下面这个，发现我之前的代码真的很鸡肋啊！https://blog.csdn.net/huqiut/article/details/122927162
this.$data 当前data数据

this.$options.data() 原始data数据

Object.assign(this.$data, this.$options.data())； 深度响应式修改