element-ui——Layout 布局

公司要求布局如图：

相关代码如下（为了强调布局展示，这里只写了布局相关的操作）：

        <el-row>
          <el-col :span="12">
            <!-- 输入框一 -->
            <el-col :span="24">
              输入框一相关代码
            </el-col>
            <!-- 输入框二 -->
            <el-col :span="24">
              输入框二相关代码
            </el-col>
            <!-- 下拉框一 -->
            <el-col :span="24">
              下拉框一相关代码
            </el-col>
          </el-col>
   ————————————注意这里，上面代码是左侧分栏部分，下面代码是右侧分栏部分——————————
          <el-col :span="11" :offset="1">
            <!-- 输入框三 -->
            <el-col :span="24">
              输入框三相关代码
            </el-col>
            <!-- 地图展示 -->
            <el-col :span="24">
              地图相关代码
            </el-col>
          </el-col>
        </el-row>

思路分析：

1. 在 el-row 中分别包括两个 el-col 用来装左侧分栏和右侧分栏

2. 两个 el-col 共 24 分栏，在每个分栏里面再进行相关小布局，小布局里 el-col 的 span 为 24是为了占满小布局里的空间

3. 偏移量 offset 也要算一个分栏

（强调！）布局中一栏共24个分栏,可以快速简便的创建布局。（下面的内容都是摘抄 element-ui 官方文档里面的，主要是为了加强记忆，不喜欢的可以直接看 element-ui 官方文档！）

1. 基础布局

使用单一分栏创建基础的栅格布局，通过 row 和 col 组件，并通过 col 组件的 span属性就可以实现自由组合布局。

第一种，直接占满24分栏
<el-row>
<el-col :span='24'></el-col>
</el-row>

第二种，用两个模块分别占12分栏，把24分栏占满，实现左右分栏的效果
<el-row>
<el-col :span='12'></el-col>
<el-col :span='12'></el-col>
</el-row>

后续情况，根据自己的需求自行改变

2. 分栏间隔

分栏之间存在间隔,Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

<el-row ::gutter='20'>
 <el-col :span="12></el-col>
 <el-col :span="12></el-col>
</el-row>

3. 混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

情况一
<el-row :gutter="20">
<el-col :span="16"></el-col>
<el-col :span="8"></el-col>
</el-row>

情况二
<el-row :gutter="20">
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
</el-row>

其他情况，自己根据需求自由组合

4. 分栏偏移

支持偏移指定的栏数（偏移量是以左边为起点，向右边偏移），通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

这个按自己需要，自由安排随便写就是了，理解 offset 作用是什么，自己随意发挥，你懂了你就是神笔马良！！！
代码如下：
<el-row :gutter="24">
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
<el-col :span="7" :offset="1"><el-col>
</el-row>

5. 对齐方式

通过 flex 布局来对分栏进行灵活的对齐，将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

情况一 flex 布局下，（justify）水平排列方式为 center
<el-row type="flex" justify="center">
<el-col :span="6"></el-col>
<el-col :span="8"></el-col>
<el-col :span="10"></el-col>
</el-row>

情况二 flex 布局下，（justify）水平排列方式为 end
<el-row :gutter="16" type="flex: justify="end">
<el-col :span="2"></el-col>
<el-col :span="19"></el-col>
<el-col :span="3"></el-col>
</el-row>

其他情况，请参看 element-ui 官方文档

Row 和 Col 相关的一些属性

Row 相关属性

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
type	布局模式，可选 flex，现代浏览器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	—
tag	自定义元素标签	string	*	div

Col 相关属性

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
push	栅格向右移动格数	number	—	0
pull	栅格向左移动格数	number	—	0
xs	<768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
sm	≥768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
md	≥992px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
lg	≥1200px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
xl	≥1920px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定义元素标签	string	*	div

 今天，在做公司项目的时候，要求我在一个对话层中实现左右分开布局效果，我一直无法实现，我一直在想有 div 标签把右边进行包裹，然后进行 css 布局调整，但是一直没有实现，我上级看到我没有实现也是让我直接调整 CSS 布局，但是我觉得 CSS 布局不太方便，我在思考 element-ui 应该有相关布局的操作，只是我不知道，然后我突然想到我同事开发过类似的页面，我就去看了他的代码，果然找到了相同页面布局的代码，我看了一会，看懂了，哈哈哈哈，然后就实现了我想要的左右布局的操作，记录一下，免得以后犯错！

itchao 加油！我一定会成为非常优秀的前端开发工程师！

----2021年8月17日19:28:38