Element表单项部分没有绑定prop，清除验证时导致报错

最新推荐文章于 2024-06-13 10:01:57 发布

原创最新推荐文章于 2024-06-13 10:01:57 发布 · 535 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

ElementUI 专栏收录该内容

1 篇文章

订阅专栏

本文讲述了在使用Vue和Element UI时遇到的一个表单验证问题，即在Dialog组件内未绑定prop的表单项在关闭时引发的错误。通过详细排查，发现未绑定prop的表单项在执行resetFields()时可能导致索引错误。解决方案是为选填项绑定prop，并设置required为false，确保所有表单项都有对应的验证规则，从而避免了错误的发生。

前阵子写项目的时候，遇到过关于Element表单验证导致的一个问题：

一开始我在Dialog 组件里录入表单信息，因为有几项信息是选填的，就没有绑定prop验证，然后在关闭窗口时按照惯例进行数据还原以及清除表单验证：

    closeModal() {
      // 关闭modal
      this.restData();
      this.$emit("close", false);
    },
    restData() {
      //重置数据
      this.personalForm = {};
      this.$refs.personalForm.resetFields();
    },

一开始的时候还没发现什么问题，但测试的时候，这个窗口在第二次打开后点击关闭时开始报错：
在这里插入图片描述
接下来就是各种逻辑打印，翻不起浪花来还白白浪费时间。问了前辈才知道是因为表单里有几项item没有绑定prop，可能就导致清除表单验证时索引出错之类的问题。

然后我就抱着半信半疑的态度先注释了那几项没有绑定prop的item，发现真的不会报错。就给那几项item绑定了prop，但因为又不需要真的验证，所以：

		sender: [{ required: false }],
        senderPhone: [{ required: false }],
        senderEmail: [{ required: false }],

然后就可以了！！！
又是一次完美的踩坑