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

elementUI清空弹框中的表单数据相关推荐

layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值
咋说呢,因为对 layui 不太熟悉,这个弹出框搞了好久,看了好多解决方案,大致尝试了一下其中几种,在坑中无法自拔...总之终于搞出来了,在这里分享一下我的笔记. 着急的直接戳这里看解决代码. 尝 ...
reactjs中收集表单数据：非受控组件和受控组件
1_非受控组件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
处理bootstrap-table分页复选框选中获取表单数据
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
python获取表单数据的代码_使用flask和python从html表单获取表单数据
我正在尝试在按下submit时从文本字段中获取表单数据,以便将其放入json格式并作为另一个页面访问json数据,该页面将是localhost:5000/info.每次我试图用request.form ...
07 【收集表单数据】
07 [收集表单数据] 在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state.例如这个纯 HTML 表单只接受一个名称: & ...
ElementUI dialog弹框退出时重置表单数据
需求进行项目开发,用到了ElementUI的dialog弹出框,当再次点击弹出框时发现,原本数据的还存在解决查阅了ElementUI的文档,发现一个好东西就是这个方法,解决了问题,分享一下用法 ...
php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单，如题我们使用模态弹出框+ajax - phpStudy...
Yii2.0 模态弹出框+ajax提交表单如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...
Yii2.0 模态弹出框+ajax提交表单
如题我们使用模态弹出框+ajax提交表单首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a( ...
html清除文本框储存记录值,如何清除edge浏览器中已保存的表单数据
如何清除edge浏览器中已保存的表单数据我们使用的edge浏览器,默认保存表单数据,想要进行清除,该怎么操作呢?今天就跟大家介绍一下如何清除edge浏览器中已保存的表单数据的具体操作步骤. 1. 首 ...

elementUI清空弹框中的表单数据

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

一、表单提交后，发现表单中的数据没有清空。两种实现方法：

二、解决点击编辑弹框，再点击添加填弹框，表单数据无法清空问题

elementUI清空弹框中的表单数据相关推荐

最新文章

热门文章