亲宝软件园·资讯

展开

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()//重置表单数据
}

加载全部内容

相关教程
猜你喜欢
用户评论