解决表单<el-form>无法实现重置的方案
程序员文章站
2022-03-02 11:54:30
...
## 记录项目点点滴滴04.19
问题描述:
今天在写<el-form表单的时候,在重置表单数据时,点击事件无效,无法将表单的数据置空。回去看了vue的文档后,发现在<el-form-item没有添加prop属性导致无法重置,最后添加后,解决了问题。
解决方案:
1.没有在表单中绑定ref对象(可不加:),正确写法如下
2.没有给表单项<el-form-item添加prop属性
PS:prop的值要和model绑定的值一致。
3.方法实现
①在methods方法中写一个重置表单信息的方法
this.$refs.searchFormRef.resetFields(); //重置对话框数据
"searchFormRef"填写你在<el-form>中绑定的ref对象
②在<el-button绑定click事件,调用方法
③成功实现
总结:
又是一个极其细微的细节,每天也要不断努力鸭,冲鸭!
上一篇: js验证手机号码和电话
下一篇: 手机号码验证