美文网首页
form resetFields没有清空的原因

form resetFields没有清空的原因

作者: linqii | 来源:发表于2020-03-31 16:14 被阅读0次
    重置表单的必要条件:

    1.表单加ref:

    <el-form :model="query" ref="formRef"></el-form>
    

    2.每个item加prop属性,需要和绑定数据的名称一致:

    <el-form-item prop="name">
        <el-input v-model="query.name"></el-input>
     </el-form-item>
    

    3.绑定点击事件中传入formRef:

    <el-button @click="resetForm('formRef')">重置</el-button>
    

    4.注册事件:

    restForm(refname) {
       this.$refs[refname].resetFields()
    }
    

    如果还有没能清空的情况,需要注意一下表单是否有初始值或者是否在某个地方改变了初始值。重置的含义就是重置为初始值,根据文档显示,resetFields是对整个表单进行重置,将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage,然后把值重置成了上一次初始化的值。

    如果你编辑时,第一次打开dialog的时候给表单绑定的model赋值了,这时候这个model的初始值就变成了你所赋值的值,所以resetFields的时候,会将model对应的每个值重置到初始值,这时候的初始值就是你编辑时赋值的那个值,而不是在data里声明的初始值,解决方式是,等dialog已经初始化mounted之后再给model赋值,也就是

    this.$nextTick(() => { // 这里开始赋值 this.query.xxx = xxx; })
    

    相关文章

      网友评论

          本文标题:form resetFields没有清空的原因

          本文链接:https://www.haomeiwen.com/subject/zbcwuhtx.html