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) {

        }

問題解決