el-table通过这样封装可以实现校验-表格校验的原理_eltable封装原理

在这里我不太理解prop为什么要写成"'tableData.' + scope.$index + '.' + item.prop"这个样子就实现了校验的效果。后来在一次项目中偶然去查看了一下el-form的源码，才明白其中的道理；

首先我们看到el-form组件的文件路径是这样的，那么其实form-item是一个单独的组件，我们通过form -> form-item嵌套的时候，其实最后实现校验的过程是一个个去校验 form-item，form组件最终的校验:

// 最主要的核心功能
validate(callback){
  this.fields.forEach(field => {
  field.validate('', (message, field) => {
    if (message) {
      valid = false;
    }
    invalidFields = objectAssign({}, invalidFields, field);
    if (typeof callback === 'function' && ++count === this.fields.length) {
      callback(valid, invalidFields);
    }
  });
});
}

其中 this.fields就是el-form-item集合:

// el-form的created中
this.$on('el.form.addField', (field) => {
  if (field) {
    this.fields.push(field);
  }
});

// el-form-item的mounted中
this.dispatch('ElForm', 'el.form.addField', [this]);

// 内部自己使用 dispatch实现组件通讯

其中最主要的就是调用el-form-item的validate方法：

validate(trigger, callback = noop) {
        this.validateDisabled = false;
        const rules = this.getFilteredRule(trigger);
        if ((!rules || rules.length === 0) && this.required === undefined) {
          callback();
          return true;
        }

        this.validateState = 'validating';

        const descriptor = {};
        if (rules && rules.length > 0) {
          rules.forEach(rule => {
            delete rule.trigger;
          });
        }
        descriptor[this.prop] = rules;

        const validator = new AsyncValidator(descriptor);
        const model = {};

        model[this.prop] = this.fieldValue;

        validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
          this.validateState = !errors ? 'success' : 'error';
          this.validateMessage = errors ? errors[0].message : '';

          callback(this.validateMessage, invalidFields);
          this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
        });
      }

其中主要的核心功能是单个的 rules(校验规则)和model(数据)，
rules的获取：

// 首先通过getFilteredRule方法过滤rules
getFilteredRule(trigger) {
  // 获取 rules
  const rules = this.getRules();
  return rules.filter(rule => {
    if (!rule.trigger || trigger === '') return true;
    if (Array.isArray(rule.trigger)) {
      return rule.trigger.indexOf(trigger) > -1;
    } else {
      return rule.trigger === trigger;
    }
  }).map(rule => objectAssign({}, rule));
},

// getFilteredRule最核心的方式就是getRules
getRules() {
  // 这个就是我们在 el-form中传递的rules
  let formRules = this.form.rules;
  // 这个就是我们自己在 el-form-item传递的rules
  const selfRules = this.rules;
  // 这里判断是不是必输的
  const requiredRule = this.required !== undefined ? { required: !!this.required } : [];
  // 这里通过formRules结合prop获取最新的prop(其实是一个对象，里面有key,value比较重要的值)
  const prop = getPropByPath(formRules, this.prop || '');
  formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];
  // 最终将rules做一个整合
  return [].concat(selfRules || formRules || []).concat(requiredRule);
},

最终我们通过分析发现其实去匹配 el-form中整体的rules是通过getPropByPath这个方法的：

function getPropByPath(obj, path) {
  let tempObj = obj;
  path = path.replace(/\[(\w+)\]/g, '.$1');
  path = path.replace(/^\./, '');
  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      throw new Error('please transfer a valid prop path to form item!');
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj[keyArr[i]]
  };
}

path.split('.')这里会对prop进行切割，我们最终得到的值其实是这样的：

最终通过formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];将formRules这个值变成了undefined，
再返回validate方法里面，看model,通过这里model[this.prop] = this.fieldValue,我们来看fieldValue：

function getPropByPath(obj, path) {
  // 这里的值其实一个对象数组：


### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。



![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)