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