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

    </el-form-item>
  </template>
</el-table-column>

// data中的数据
formData: {
tableData: [
{ name: “”, age: “” },
{ name: “”, age: “” },
{ name: “”, age: “” },
{ name: “”, age: “” },
],
},
ruleData: {
name: { message: “请输入名字”, required: true },
age: { message: “请输入年龄”, required: true },
},
column: [
{ label: “名字”, prop: “name” },
{ label: “年龄”, prop: “age” },
],

在这里我不太理解prop为什么要写成`"'tableData.' + scope.$index + '.' + item.prop"`这个样子就实现了校验的效果。后来在一次项目中偶然去查看了一下`el-form`的源码，才明白其中的道理；  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b3fb0b9ccb5846df85f1bbfd09415081.png)  
 首先我们看到`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进行切割，我们最终得到的值其实是这样的：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/77e8d94ec8dd48ccafc465622506554f.png)  
 最终通过`formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];`将`formRules`这个值变成了`undefined`，  
 再返回`validate`方法里面，看`model`,通过这里`model[this.prop] = this.fieldValue`,我们来看`fieldValue`：

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

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！