element ui自动清空表单
机车柑仔店 人气:0在实际开发中,新增弹窗的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、举例组件代码``
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px"> <!--prop属性添加到form-item上,需要和绑定数据的最后名称一致--> <el-form-item label="名称:" prop="name"> <el-input v-model="form.name" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">确定</el-button> <el-button @click="resetForm('searchForm')">重置</el-button> </el-form-item> </el-form>
2、表单加ref属性:ref="searchForm"
<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
3、form的每个item加prop属性,否则无法清空,elementUI官方文档中也有说明
<el-form-item label="名称:" prop="name"> <el-input v-model="form.name" placeholder="请输入内容"></el-input> </el-form-item>
4、绑定点击事件中传入"searchForm"
<el-form-item> <el-button @click="resetForm('searchForm')">重置</el-button> </el-form-item>
5、注册事件
resetForm(searchForm) { this.$refs[searchForm].resetFields()//重置表单数据 }
加载全部内容