element ui提交表單返回成功後自動清空表單的值的實現代碼

Posted on by

在實際開發中，新增彈窗的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()//重置表單數據
}

到此這篇關於elementui提交表單返回成功後自動清空表單的值的文章就介紹到這瞭,更多相關elementui自動清空表單內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：