欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-09 13:33:37
...

问题:

  • 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"
赶紧试试吧,可以的话记得点赞喽

文章转自:https://my.oschina.net/yxmBetter/blog/1535157
感谢作者:YXMBetter