欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element ui提交表單返回成功后自動清空表單的值的實現(xiàn)代碼

 更新時間:2022年08月26日 14:38:57   作者:機車柑仔店  
這篇文章主要介紹了elementui提交表單返回成功后自動清空表單的值,本文通過兩種方法結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

在實際開發(fā)中,新增彈窗的form表單中輸入內(nèi)容后,新增成功后應(yīng)該把form表單清空,不然下次再進入新增彈窗時,會有上次新增完的內(nèi)容

方法一:form表單項少的話可以選擇手動刪除:

this.loginForm = {
                name:'',
                username:'',
                password:'',
                confirm: '',
                department: '',
                phone: ''
              }

方法二:以上的方法當然也是可以的,但是如果form表單有很多項的話,你需要寫很多清空代碼;
elementui中的form提供resetFields方法,用于清空所有表單數(shù)據(jù),前提是表單項中要使用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//注冊成功后關(guān)閉注冊彈窗,記得使用this.方法,不然關(guān)閉不了
              // this.resetForm(formName)
              // this.$refs[this.loginForm].resetFields()
              // this.$router.push("/modify")
            } else {
              this.$message({
                type: "error",
                message: res.message
              })
            }
          })
        }
      })
    },

補充:element ui 清空表單數(shù)據(jù)

1、舉例組件代碼``

?<el-form ref="searchForm" :inline="true" :model="form" label-width="80px">
? ? ?<!--prop屬性添加到form-item上,需要和綁定數(shù)據(jù)的最后名稱一致-->
? ? ?<el-form-item label="名稱:" prop="name">
? ? ??? ?<el-input v-model="form.name" placeholder="請輸入內(nèi)容"></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="請輸入內(nèi)容"></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()//重置表單數(shù)據(jù)
}

到此這篇關(guān)于elementui提交表單返回成功后自動清空表單的值的文章就介紹到這了,更多相關(guān)elementui自動清空表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論