vue + elementui表单重置 resetFields问题(无法重置表单)

Posted ggsddu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue + elementui表单重置 resetFields问题(无法重置表单)相关的知识,希望对你有一定的参考价值。

问题:

    elementui在重置表单时,无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据;
    elementui 设置rules后没有效果

解决方法:

    1、表单加ref属性

<el-form ref="refname"></el-form>

    2、form的每个item加prop属性(踩了好久的坑这个,需要和绑定数据的最后名称一致,prop属性添加到form-item上)

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

    3、绑定点击事件中传入refname

<el-form-item>
    <el-button @click="resetForm(‘refname‘)">清空</el-button>
</el-form-item>

    4、注册事件

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

+ 5、检查是否有初始值
在data数据上需要挂载表单数据初始值为‘‘

    如果使用了$store.state.fm.plan管理关联表单数据,那么在form中需要添加:model="$store.state.fm"。

 

以上是关于vue + elementui表单重置 resetFields问题(无法重置表单)的主要内容,如果未能解决你的问题,请参考以下文章

vue + elementui表单重置 resetFields问题(无法重置表单)

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

JQuery中如何重置(reset)表单

vue3+element-plus表单验证之登录

form表单reset重置按钮

登录综合案例01,前端使用vue+elementui+axios 后端 springboot+mybatis-plus+swagger2