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