關於element-ui resetFields

上週換到新項目組，依然是vue，不過是搭配element-ui。

這兩天開始用el-form，發現了個問題。

就是個人表單肯定提交以後，須要重置表單，一開始我沒看熟API，直接將form對象手動賦成初始值，可是這樣的問題是再打開每一個el-form-item仍是校驗成功，

這時我發現了resetFields方法(對整個表單進行重置，將全部字段值重置爲初始值並移除校驗結果)，因而改用這個方法。

改了以後出現了另外一個問題，其餘字段都重置了，可是有一個form-item裏面放的是checkbox，我給的初始值是false，可是重置後變成了true。我覺得我給的值類型不對，後來發現怎麼也不行。

去看了下elementui form/form-item的源碼，發現，必須在每一個form-item里加上prop屬性，而且與-model的值相同才能夠。

由於個人checkbox不是必選的，也沒什麼其餘驗證，因此一開始沒有給prop屬性：

<el-form-item label="領取限制" prop="limitType">
     <el-checkbox v-model="form.limitType">關注公衆號才能領取</el-checkbox>
</el-form-item>

後來改爲了：

<el-form-item label="領取限制" prop="limitType">
    <el-checkbox v-model="form.limitType">關注公衆號才能領取 
    </el-checkbox>
</el-form-item>


rules: {
　　limitTYpe: []
}

這樣才重置成功～

 

來看一下form-item中關於resetField的代碼：

    // 重置字段爲初始值
    resetField() {
      this.validateState = '';
      this.validateMessage = '';

      // 獲取model數據模型中所對應的值
      let model = this.form.model; // 全部表單數據
      let value = this.fieldValue; // 該項表單數據
      let path = this.prop;
      if (path.indexOf(':') !== -1) {
        path = path.replace(/:/, '.');
      }

      let prop = getPropByPath(model, path, true);

      this.validateDisabled = true;
      // 重置爲一開始獲取的初始值
      if (Array.isArray(value)) {
        prop.o[prop.k] = [].concat(this.initialValue);
      } else {
        prop.o[prop.k] = this.initialValue;
      }

      // 向下尋找select組件，發佈fieldReset事件暴露初始表單數據
      this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
    },

 能夠看到初始值是經過prop計算獲得當前path，由path獲得getPropByPath的返回值prop，並將prop.o[prop.k]設置爲初始值，完成重置。