这篇文章主要介绍了elementui提交表单返回成功后自动清空表单的值,本文通过两种方法结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在实际开发中，新增弹窗的form表单中输入内容后，新增成功后应该把form表单清空，不然下次再进入新增弹窗时，会有上次新增完的内容
方法一：form表单项少的话可以选择手动删除：
this.loginForm = { name:'', username:'', password:'', confirm: '', department: '', phone: '' } 方法二：以上的方法当然也是可以的，但是如果form表单有很多项的话，你需要写很多清空代码；
elementui中的form提供resetFields方法，用于清空所有表单数据，前提是表单项中要使用prop属性，绑定input中的v-model所绑定的字段，才可以被清空：
this.$nextTick(() => { if(this.$refs.loginForm){ //this.$refs.addForm.clearValidate(); this.$refs.loginForm.resetFields();//个人喜爱。clearValidate有时候验证清不掉，具体原因暂时没找到 } }) 这样所有使用了prop属性的表单项都会被清空
注册功能方法的代码如下:
register(){ if (this.loginForm.password !== this.loginForm.confirm) { this.$message({ type: "error", message: '2次密码输入不一致！' }) return } this.$refs['loginForm'].validate((valid) => { if (valid) { request.post("/user/register", this.loginForm).then(res => { if (res.code === 200) { this.$message({ type: "success", message: "注册成功" }) // this.loginForm = { // name:'', // username:'', // password:'', // confirm: '', // department: '', // phone: '' // } this.$nextTick(() => { if(this.$refs.loginForm){ //this.$refs.addForm.clearValidate(); this.$refs.loginForm.resetFields();//个人喜爱。clearValidate有时候验证清不掉，具体原因暂时没找到 } }) this.dialogVisible = false//注册成功后关闭注册弹窗，记得使用this.方法，不然关闭不了 // this.resetForm(formName) // this.$refs[this.loginForm].resetFields() // this.$router.push("/modify") } else { this.$message({ type: "error", message: res.message }) } }) } }) }, 补充：element ui 清空表单数据
1、举例组件代码``
确定 重置
2、表单加ref属性：ref="searchForm"
3、form的每个item加prop属性，否则无法清空,elementUI官方文档中也有说明
4、绑定点击事件中传入"searchForm"
重置
5、注册事件
resetForm(searchForm) { this.$refs[searchForm].resetFields()//重置表单数据 }到此这篇关于elementui提交表单返回成功后自动清空表单的值的文章就介绍到这了,更多相关elementui自动清空表单内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是element ui提交表单返回成功后自动清空表单的值的实现代码的详细内容，更多请关注0133技术站其它相关文章！
