一、基礎表格：

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’};
}
}