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

解决表单<el-form>无法实现重置的方案

程序员文章站 2022-03-02 11:54:30
...

## 记录项目点点滴滴04.19

问题描述:

今天在写<el-form表单的时候,在重置表单数据时,点击事件无效,无法将表单的数据置空。回去看了vue的文档后,发现在<el-form-item没有添加prop属性导致无法重置,最后添加后,解决了问题。
解决表单<el-form>无法实现重置的方案

解决方案:

1.没有在表单中绑定ref对象(可不加:),正确写法如下

解决表单<el-form>无法实现重置的方案

2.没有给表单项<el-form-item添加prop属性

PS:prop的值要和model绑定的值一致。
解决表单<el-form>无法实现重置的方案

3.方法实现

①在methods方法中写一个重置表单信息的方法

 this.$refs.searchFormRef.resetFields(); //重置对话框数据
 "searchFormRef"填写你在<el-form>中绑定的ref对象

②在<el-button绑定click事件,调用方法
解决表单<el-form>无法实现重置的方案
③成功实现

总结:

又是一个极其细微的细节,每天也要不断努力鸭,冲鸭!