简介：通过基础的 24 分栏，迅速简便地创建布局。标签为el-col和el-row

1、col

源码路径：packages/col/

我们先看看index.js，这个js主要引入src/col.js,将ElCol组件注册为一个全局插件。所以col的主要实现逻辑只需要看src/col.js。

插件的相关知识传送门vue-插件

// col.js
export default {
  name: 'ElCol',
// 父组件传入的值，可以查看element-ui官网查看作用
  props: {
  // 栅格占据的列数
    span: {
      type: Number,
      default: 24
    },
 // 自定义元素标签
    tag: {
      type: String,
      default: 'div'
    },
    offset: Number, // 栅格左侧的间隔格数
    pull: Number, // 栅格向左移动格数
    push: Number,// 栅格向右移动格数
    xs: [Number, Object],// <768px 响应式栅格数或者栅格属性对象
    sm: [Number, Object],// ≥768px 响应式栅格数或者栅格属性对象
    md: [Number, Object],// ≥992px 响应式栅格数或者栅格属性对象
    lg: [Number, Object],// ≥1200px 响应式栅格数或者栅格属性对象
    xl: [Number, Object]// ≥1920px 响应式栅格数或者栅格属性对象
  },
/* 计算属性-获取ElRow节点的gutter属性，col逐级往上寻找父节点，判断是否是ElRow,如果找到ElRow
   则返回gutter 属性，如果找不到继续往上直到不存在父节点则返回0.
   这里的原因就是ElRow和ElCol不一定是父子关系，可能嵌套了其他组件。*/
  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  },
//渲染函数
  render(h) {
    let classList = [];
    let style = {};

    if (this.gutter) {
      /* 获取ElRow的gutter值对col添加padding实现分栏间隔
（比如gutter等于20，分别添加padding-left和padding-right 10px）*/
      style.paddingLeft = this.gutter / 2 + 'px';
      style.paddingRight = style.paddingLeft;
    }
    // 对span, offset, pull, push遍历，如果父组件传入值或者0，则往数组classList添加拟定的class数组元素
    ['span', 'offset', 'pull', 'push'].forEach(prop => {
      if (this[prop] || this[prop] === 0) {
        classList.push(
          prop !== 'span'
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });
    // 同上，'xs', 'sm', 'md', 'lg', 'xl'的值允许使用数字和对象，分别对这两种情况作处理，添加拟定的class数组元素
    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
      if (typeof this[size] === 'number') {
        classList.push(`el-col-${size}-${this[size]}`);
      } else if (typeof this[size] === 'object') {
        let props = this[size];
        Object.keys(props).forEach(prop => {
          classList.push(
            prop !== 'span'
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });
    //this.tag 父组件传入的html标签，默认div
    return h(this.tag, {
      class: ['el-col', classList],
      style
    }, this.$slots.default);// 不具名的slot内容
  }
};

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器

如果对vue render不了解,传送门渲染函数 & JSX
从这里标签el-col已经解读完毕。可能对于vue用户绝大多数情况还是习惯于使用template 来创建 HTML。通过源码的解读也可以学习render的相关知识，查漏补缺。

2、row

row没有什么复杂的功能点，前置先了解flex布局和vue的slot，看如下源码注释了解即可。

export default {
  name: 'ElRow',

  componentName: 'ElRow',

  props: {
    // 自定义元素标签
    tag: { 
      type: String,
      default: 'div'
    },
    gutter: Number, // 栅格间隔
    type: String, // 目前可选flex
    // flex布局有效
    justify: {
      type: String,
      default: 'start'
    },
    // flex布局有效
    align: {
      type: String,
      default: 'top'
    }
  },

  computed: {
    style() {
      const ret = {};

      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }

      return ret;
    }
  },
  // 渲染函数，渲染html标签添加拟定的class，this.$slots.default插槽，将el-row组件子元素插入渲染的html标签内
  render(h) {
    return h(this.tag, {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align !== 'top' ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
      ],
      style: this.style
    }, this.$slots.default);
  }
};