Element UI Layout源码解析

最新推荐文章于 2025-03-12 20:05:12 发布

平台开发组

最新推荐文章于 2025-03-12 20:05:12 发布

阅读量461

点赞数

分类专栏：前端文章标签： vue elemen layout

本文链接：https://blog.youkuaiyun.com/weixin_42674359/article/details/101789806

版权

本文深入解析了Element UI的Layout组件，主要由el-row和el-col构成，用于快速搭建布局。el-row处理flex布局、justify和align属性；el-col则关注gutter、span、offset等属性实现栅格间距和响应式布局。通过源码分析，揭示了如何利用负margin和CSS技巧实现灵活的布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

layou组件也是使用element框架经常使用的组件，通过24分栏，可以快捷的完成布局构建。layout组件构成为el-row和el-col ，分别代表行的容器和列的容器。

el-row

export default {
  name: 'ElRow',

  componentName: 'ElRow',

  props: {
    tag: {
      type: String,
      default: 'div'
    },
    gutter: Number,
    type: String,
    justify: {
      type: String,
      default: 'start'
    },
    align: {
      type: String,
      default: 'top'
    }
  },

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

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

      return ret;
    }
  },

  render(h) {
    return h(this.tag, {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align !== 't