1,util 的getPropByPath方法

    1. //obj:el-form的rules path:el-form-item的props
    2. export function getPropByPath(obj, path, strict) {
    3. let tempObj = obj;
    4. //替换所有[]内加任意非空字符 为.加字符
    5. path = path.replace(/\[(\w+)\]/g, '.$1');
    6. //清除开头的点便于分割
    7. path = path.replace(/^\./, '');
    8. let keyArr = path.split('.');
    9. let i = 0;
    10. //将prop的对象取值方式[]的取值改写为.的形式如(target.targetObj的rule,
    11. //遍历rules里的层次结构 {target: { targetObj:xxx }}找到对应的那一集规则
    12. for (let len = keyArr.length; i < len - 1; ++i) {
    13. if (!tempObj && !strict) break;
    14. let key = keyArr[i];
    15. if (key in tempObj) {
    16. tempObj = tempObj[key];
    17. } else {
    18. if (strict) {
    19. throw new Error('please transfer a valid prop path to form item!');
    20. }
    21. break;
    22. }
    23. }
    24. return {
    25. o: tempObj,
    26. k: keyArr[i],
    27. v: tempObj ? tempObj[keyArr[i]] : null
    28. };
    29. };

    el-form得益于上面的方法,在v-model绑定成数组时,验证时候会从model取当前form-item的prop如 parent.1.age作为path,然后在对应事件触发时,通过fieldValue方法取出准确的值。
    这样就做到了,绑定数组型的model 在字段相同时,错误消息都是相对于单个的form-item,否则可能直接找不到

    1. fieldValue() {
    2. const model = this.form.model;
    3. if (!model || !this.prop) { return; }
    4. let path = this.prop;
    5. if (path.indexOf(':') !== -1) {
    6. path = path.replace(/:/, '.');
    7. }
    8. return getPropByPath(model, path, true).v;
    9. },

    form-item递归寻找第一个祖先el-form元素,读取里面的元素

    1. form() {
    2. let parent = this.$parent;
    3. let parentName = parent.$options.componentName;
    4. while (parentName !== 'ElForm') {
    5. if (parentName === 'ElFormItem') {
    6. this.isNested = true;
    7. }
    8. parent = parent.$parent;
    9. parentName = parent.$options.componentName;
    10. }
    11. return parent;
    12. },