elementUI清空弹框中的表单数据

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

---

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

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

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

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