element 表格方法cell-style改變單元格樣式

<el-table
:cell-style="timeStyle"
>

// 修改樣式的部分為：
<el-table-column
label="創建時間"
:formatter="startTime"
width="150">

// 方法：
methods：{
   // 改變表格中時間的字體樣式：調小
   timeStyle(column) {
   if(column.columnIndex === 2 || column.columnIndex === 4) {
   return {"font-size": "2px","color":"red"} 
}

cell-class-name   和  cell-style  綁定的方法都是可以獲取  Function({row, column, rowIndex, columnIndex})   ，官方文檔明確表示cell-style  要返回一個對象形式的class樣式，class-name方法可以是一個字符串形式，只是大多數情況下，cell-style 如果返回一個字符串也可以生效<el-table  :data="testCases"  stripe

 border size="small" row-key="id" :max-height="maxHeight" @selection-change="selectionChange" @filter-change="filterChange" :cell-style="cellStyle" ref="table"> <el-table-column show-overflow-tooltip width="100" label="測試結果" prop="testResult" sortable> <template slot-scope="scope"> <input 
 class="custom_input" 
 v-if="scope.row.id===idFocused" 
 v-model="scope.row.testResult" @blur="idFocused=''"
 @keyup.enter="idFocused = ''"> <span v-else>{{scope.row.testResult}}</span> </template> </el-table-column>
<el-table/>

method:{
　cellStyle({row, column, rowIndex, columnIndex}) {//根據測試結果動態調整單元格樣式，成功-綠色，失敗-紅色，不支持-黃色

 let cellStyle; switch (row.testResult) { case '成功': cellStyle = 'background: green;color:white'; break; case '失敗': cellStyle = 'background: red;color:white'; break; case '不支持': cellStyle = 'background: #aaa;color:white'; break; default: cellStyle = ''; } if (column.label == '測試結果') return cellStyle; }

}