dialog配合表单采坑-无法获取表单的ref

时间:2024-04-12 14:38:25

①开发背景:新增XX功能 点击之后 弹出的是el-form表单组成的dialog,  表单新增判空规则,  提交时表单项不合格, 会报错

如下图所示, 只有当表单项合格, this.$refs[formName].validate(async valid => {}) 中的valid才为true, 

dialog配合表单采坑-无法获取表单的ref

②在这种报错前提下, 我们关闭再打开dialog, 会发现报错信息还在。第一种办法(不可行), 在按钮点击的时候调用

this.$refs['accountForm'].resetFields() 会报错, 因为此时表单在dialog中还未刷新出来, this.$refs['accountForm']为undefined,

我们需要给dialog新增一个@close事件, dialog关闭的时候调用this.$refs['accountForm'].resetFields()(重置表单错误提示信息)即可。

dialog配合表单采坑-无法获取表单的ref