element ui form表单清空规则

Posted 2020-10-24 王小宾

公司项目重构，经过商定使用element ui。在重构项目的时候发现一下element ui上很蛋疼的东西。

例如，这个form表单就是一个。趁着在高铁上没事，把想写的东西写一下。

 

先说一下element ui提交form表单的时候，如果没有进入我们预想的代码流程，一般就是你写的自定义验证规则有误。

例如如下代码。验证镜像的名称是否重复的一个方法。每个if-else都需要有内容。如若满足就要有一个callback()。

反正我是被这个地方给坑了，之前写代码，一般就是if满足条件之后怎么怎么样，这次必须return 一下内容

let that = this;
      var checkName = function (rule, value, callback) {
        let re = /^[A-Za-z0-9_\.\-\u4e00-\u9faf]+$/;
        if (!value) {
          callback(new Error(‘该字段为必填项‘));
        } else {
          if (re.test(value)) {
            let url = that.prefix + ‘/yr_images/create_image/‘;
            let data = {
              is_check_name: 1,
              name: value
            };
            that.Axios({
              method: ‘post‘,
              url: url,
              data: data,
              transformRequest:function (data) {
                let ret = ‘‘;
                for (let it in data) {
                  ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
                }
                return ret.slice(0, ret.length - 1);
              }
            })
              .then(function (res) {
                if (res.data.error_code != -200) {
                  return callback(new Error(‘名称重复‘))
                } else {
                  return callback()
                }
              })
              .catch(function (err) {
                console.log(err);
              })
          } else {
            callback(new Error(‘输入不符合规则‘))
          }
        }
      };

言归正传，我们公司验证表单大部分是弹框内验证的。

当我打开弹框，form验证规则不满足，然后我关闭弹框，按理说应该取消红色提示，可是没有。

想到form有一个重置按钮，然后想到完全可以使用该方法。

可是打开之后之后，在控制台会报错，说该方法不存在！

上网查原因，一大堆都有，最后查到是element ui 打开弹框的方法是自带延迟的。

于是，我就用了下面的方法。

setTimeout(function () {
          that.$refs[‘dialogContent‘].resetFields();
        },300)

还是有问题，如果网络慢怎么办，可能还是报错。

于是想到了js的try catch方法，我在外部给他包裹已一层try ,catch语句。问题解决！但是，测试最后提了个bug，那就是数据驱动的vue，页面内容没有改变。

内容被重复渲染。一直没有找到问题。最后才发现是setTimeout造成的！！！！！现在想想也傻，既然后try，catch了，为什么还要增加一个settimeout！！

try {
          setTimeout(function () {
            that.$refs[‘dialogContent‘].resetFields();
          },300)
        } catch (e) {

        }

最终方法如下：

try {
          that.$refs[‘dialogContent‘].resetFields();
        } catch (e) {

        }

问题解决