一、基础表格：

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

 <el-table-column class-name=“book”></el-table-column>
        <style scoped>
           >>> .book{ … }   或者
           /deep/ .book{ … }
</style>

G .多级表头：在<el-table-column>内部嵌套<el-table-column>标记。
（3）通过class或style设置表格不同位置的外观：
<el-table>标记对的属性。

例：

rowClassName({row,rowIndex}){
          //row - 行信息，由所有的列数据组成的一个对象
          //rowIndex - 行索引值
}

例：设置偶数行和奇数行采用不同的背景颜色。

 <el-table :row-class-name=“rowClassName”>
</el-table>
methods:{
  rowClassName({row,rowIndex}){
    if(!(rowIndex%2)){
      return ‘aaa’;     //偶数行遵循.aaa类样式
}else{
  return ‘bbb’;    //奇数行遵循.bbb类样式
}
}
}
        <style scoped>
          >>> .aaa{}
          >>> .bbb{}
</style>

 例：<el-table :cell-class-name=“cellClassName”>
         cellClassName({row,column,rowIndex,columnIndex}){
            if(rowIndex===0 && columnIndex===3){
               return ‘aaa’;
}
}

例：设置性别单元格的样式。

 <el-table :cell-style=“cellStyle”>
         cellStyle({row,column,rowIndex,columnIndex}){
            if(row.sex===’男’ && column.property===’sex’){
              return ‘background-color:#ff5857;color:#fff’;
              return {backgroundColor:’#000’,color:’#fff’};
}
}