关于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]设置为初始值，完成重置。