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

问题:

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

解决方法:

  • 一、表单加ref属性
<el-form ref="refname"></el-form>
  • 二、form的每一个item加prop属性(踩了很久的坑这个,须要和绑定数据的最后名称一致,prop属性添加到form-item上)
<el-form-item prop="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>
  • 三、绑定点击事件中传入refname
<el-form-item>
    <el-button @click="resetForm('refname')">清空</el-button>
</el-form-item>
  • 四、注册事件
restForm(refname) {
   this.$refs[refname].resetFields()
}

+ 五、检查是否有初始值
在data数据上须要挂载表单数据初始值为''
  • 若是使用了$store.state.fm.plan管理关联表单数据,那么在form中须要添加:model="$store.state.fm"
  • 赶忙试试吧,能够的话记得点赞喽
相关文章
相关标签/搜索