第六章 Element UI

内容来源于蓝桥杯竞赛，自己根据这个题纲重新巩固下前端的知识

第六章 Element UI

Container布局

布局实现方式，首先删除App.vue冗余代码，创建container文件定义布局模式，App.vue种引入布局模式。

1. 上下布局

2.上中下布局

3. 左右布局

上-下（左右）布局

4.上-下（左右）布局

5.上-下（左右（上下））布局

6.左右（上下）布局

7.左-右（上中下）布局

Layout布局

Layout 布局把屏幕分成 24 列，也就是说每一行可以分成 24 等份。在 Element UI 中，用 组件代表行，用 组件代表列

新建layout.vue页面

分栏间隔

对于栅格布局来说，我们可能会有这样一个需要，就是列与列之间有一定的间隔间隙，故在 组件里提供了 gutter 属性来指定每一列之间的间隔。

与需要设置间隔的列是父子关系。

分栏偏移

分栏偏移就是我们可以指定某列的偏移，由于作用域是列，所以 Element UI 给 el-col 组件提供了 offset 属性来设置列的偏移栏数。

对齐方式

当一行分栏的总占比没有达到 24 份的时候，我们可以通过使用 flex 布局让分栏灵活对齐。

对于不同的对齐方式，flex 布局提供了 justify 属性来指定 start、center、end、space-between、space-around 其中的属性值来设置元素的排版方式，具体如下表所示：

属性值	说明
start	从起始位置开始排列元素。
center	居中排列。
end	从尾部位置开始排列元素。
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-around	均匀排列每个元素，每个元素周围分配相同的空间。

响应式布局

Element UI 参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：

• xs：特小，手机端。
• sm：小于浏览器一半的宽度。
• md：浏览器一半宽度左右。
• lg：接近浏览器全屏宽度。
• xl：浏览器全屏宽度。

里边数字军代表占比分数

表单组件

Form表单

表格组件

多选表格

自定义表头

在表头加一个搜索功能，通过关键字或者 id 来搜索特定数据。

个人认为：这一章以及下一章Echarts都应该在实际使用中参考官网去学习，在应用中去理解