Element-UI的table表格的樣式的常用的操作

element官方文件：
https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

一、設定表頭樣式
需求：將表頭樣式改為背景色藍色，字型顏色白色，字重400

1.字串形式：直接將tableStyle名稱賦值給header-cell-class-name

<el-table 
   :data="tableData[lang]"  
   border 
   :header-cell-style='tableHeaderStyle'
 >

說明：表頭單元格的 style 的回撥方法，也可以使用一個固定的 Object 為所有表頭單元格設定一樣的 Style。
型別：Function({row, column, rowIndex, columnIndex})/Object
函式形式：將tableHeaderStyle方法傳遞給header-cell-style
編寫tableHeaderStyle方法，返回樣式

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {

 	return 'background-color:#1989fa;color:#fff;font-weight:400;'
 	
}

2.物件形式：直接在物件中編寫樣式

<el-table 
  :data="tableData[lang]" 
   border 
   :header-cell-style="{
     'background-color': '#1989fa',
     'color': '#fff',
     'font-weight': '400'
 }">

二、設定行樣式

需求：將表格中行的字型顏色設定為淺藍色
1.row-class-name
Function({row, rowIndex})/String
省略程式碼

2.row-style
Function({row, rowIndex})/Object

<el-table
   :data="tableData"
   border
   :row-style="tableRowStyle"
 >

編寫tableRowStyle方法，返回樣式
// 修改table tr行的字型

tableRowStyle ({ row, rowIndex }) {
  return 'color:#ecf5ff'
 }

三、設定列樣式

<el-table
   :data="tableData"
   border
   :cell-style="cellStyle"
 >

 /*cellStyle({row,column,rowIndex,columnIndex}){
   return "font-size:15px;color:red;"
  },*/
  cellStyle({column,columnIndex}){
   return "font-size:15px;color:red;"
  },


  

四、設定行列綜合寫法

<el-table
   :data="tableData"
   border
   :cell-style="cellStyle"
 >

 cellStyle({row,column,rowIndex,columnIndex}){
   return "font-size:15px;color:red;"
 },