element ui form表單清空規則

公司項目重構，經過商定使用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) {

        }

問題解決