Vue.js的PC端响应式框架 — Element UI基础组件

安装Element UI框架：

1、在项目中执行下列代码：npm install element-ui --save-dev
2、在src\main.js文件中引入：
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

（一）Basic 基础组件

一、布局元素：
标记：行元素、列元素
1、必须包裹在的内部。
2、Element UI的栅格设定为一行24格。
（1）的span属性：设置一列所占的格子个数，默认值24。
（2）的offset属性：设置格子相对于左侧的偏移格子数。
3、的属性：
gutter：设置格子之间的间距（单位为像素）。
type：可以取值为type=“flex”，采用弹性盒布局。
justify：在type=“flex”时，设置弹性项目的水平对齐方式。
align：在type=“flex”时，设置弹性项目的垂直对齐方式。
tag：设置转换为哪个HTML标记。默认值：div。
4、的属性：
将屏幕大小分割为4个断点：
1920 1200 992 768
xl lg md sm xs
tag：设置转换为哪个HTML标记。默认值：div。
5、官网中组件的配置：
Attributes：属性
Methods：方法
Events：事件
Slot：插槽

二、布局容器：

1、：布局的外层容器，下面的元素必须包含在本容器中。
direction属性：内部元素的排列方向。
取值为horizontal（默认值，水平排列）、vertical（垂直排列）。
当内部内部顶部栏和底部栏时，会自动转换为垂直排列。
2、：顶部栏。
宽度：和同宽。
高度：由height属性来确定，默认值为60px。
3、：侧边栏。
宽度：由width属性来确定，默认值为300px。
高度：与同高。
4、：主体栏。
宽度：容器宽度减去侧边栏宽度。
高度：默认值为40px。
默认具备20px的padding。
5、：底部栏。
宽度：和同宽。
高度：由height属性来确定，默认值为60px。
例：
顶部栏

侧边栏
主体栏

底部栏

三、图标：
四、按钮：
1、type：设置按钮的类型（primary、info、warning、danger、success）
2、plain：设置是否为朴素按钮。
3、round：设置是否为圆角按钮。
4、circle：设置是否为圆形按钮。
5、icon：设置按钮表面文本左侧的图标。
将图标设置到按钮表面文本的右侧：

单击 <i class=“el-icon-search el-icon–right”>

6、disabled：设置按钮是否可用。
7、loading：设置按钮是否带有加载动画。
8、size：设置按钮的大小，取值：medium、small、mini。
9、autofocus：设置按钮是否自动聚焦。
10、native-type：设置按钮的原生类型，取值：button、submit、reset。
11、按钮组：利用标记对包裹
五、文字链接：
underline、disabled、type、icon、href、title、target。

（二）Data 数据组件—Table表格

一、基础表格：
1、标记对：、
2、显示基础表格：
（1）利用标记对的data属性（JSON数组）注入数据。
（2）利用标记对的prop属性设置列数据字段名。
（3）利用标记对的label属性指定表头文本。
（4）利用标记对的width属性指定列宽。
3、为表格添加特定外观：
（1）的属性：
A .斑马线表格：stripe。【逻辑值】
B .带边框表格：border。【逻辑值】
C .固定表头：height，设置表格的总高度。
D .流体高度：max-height，设置表格可以占据的最大高度。
E .是否显示表头：show-header。【逻辑值】
F .空数据内容：empty-text，默认值：暂无数据。
G .列宽自动撑开：fit。【逻辑值】
H .表格的大小：size，取值为medium、small、mini。
（2）的属性：
A .固定列：fixed。【逻辑值】
B .对齐方式：align。
C .表头对齐方式：header-align。
D .拖拽列：resizable。【逻辑值，默认值为true】
必须在具备border属性时生效。
E .列类名：class-name
F .表头类名：label-class-name
上述两个属性提供了自定义的类名，在
例：
cellClassName({row,column,rowIndex,columnIndex}){
if(rowIndex=0 && columnIndex=3){
return ‘aaa’;
}
}
例：设置性别单元格的样式。

cellStyle({row,column,rowIndex,columnIndex}){
if(row.sex===’男’ && column.property===’sex’){
return ‘background-color:#ff5857;color:#fff’;
return {backgroundColor:’#000’,color:’#fff’};
}
}
二、表格行的单选：
1、的属性：highlight-current-row
功能：设置是否高亮显示（选中行）当前行。
2、的方法：setCurrentRow(row)
功能：将参数指定的行作为当前行。若省略参数，则将选中的行
取消选中状态。
例：通过按钮将表格中的第三行设置为高亮显示。
<el-button @click=“btnClick”>选中第三行
btnClick(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 48: …tableData[2]); }̲ 3、<el-table>的…refs.student.toggleRowSelection(this.tableData[2]);
selected参数的取值时逻辑值。
（2）toggleAllSelection()：切换所有行的选中状态。
（3）clearSelection()：清除掉所有选中状态。
四、表格的自定义模板和展开行：
1、自定义模板：
（1）在标记对内部使用标记对。
（2）在自定义模板中使用 作用域插槽：


//sc.row - 任意行的所有列分量
//sc.column - 本列的列属性
//sc.KaTeX parse error: Expected '}', got '&' at position 2949: ….age>=value[0] &̲& row.age<value…refs.student.clearFilter();
七、表尾合计：
1、的show-sumary属性：设置是否显示表尾合计。
2、的sum-text属性：设置合计行第一个单元格的文本。
3、的summary-method属性：
取值为函数，函数返回值为数组。
例：统计年龄的平均值，其他列不进行统计。
summaryMethod({columns,data}){
let temp=new Array(columns.length).fill(’+’);
let sum=0;
for(let i=0;i<data.length;i++){
sum+=data[i].age;
}
temp[0]=“总计项”;
temp[5]=sum/data.length;
return temp;
}
八、合并行和列：
1、使用的span-method属性来实现单元格合并。
取值是函数，函数的返回值是数组。

2、例1：跨行合并（先判断列下标）。
spanMethod({row,column,rowIndex,columnIndex}){
if(columnIndex=1){
if(rowIndex=6){
return [2,1]; //第一个元素为跨行数，第二个元素为跨列数
}
if(rowIndex===7) {
return [0,0]; //删除单元格
}
}
}
3、例2：跨列合并（先判断行下标）
九、表格内容的格式化：
1、的formatter属性：
取值是函数。

format(row,column,cellValue,index){}
2、为表格添加是否成年列。
isAdult(row,column,cellValue,index){
if(row.age>=18){
return ‘成年’;
}else{
return ‘未成年’;
}
}
3、将地址分割为省市两列。
privence(row){
let index=row.address.indexOf(‘省’);
if(index!=-1){
return row.address.slice(0,index+1);
}else{
return row.address;
}
},
city(row){
let index=row.address.indexOf(‘省’);
if(index!=-1){
return row.address.slice(index+1);
}
}