element UI表格使用cell-style改变单元格样式

【例子1】

// 调用方法的部分为：

:cell-style="timeStyle"

>

// 要修改样式的部分为：

label="创建时间"

:formatter="startTime"

width="150">

// 方法：

methods：

// 改变表格中时间的字体样式：调小

timeStyle(column) {

if(column.columnIndex === 2 || column.columnIndex === 4) {

return "font-size: 2px"

【例子2】

:data="testCases"

stripe

border

size="small"

row-key="id"

:max-height="maxHeight"

@selection-change="selectionChange"

@filter-change="filterChange"

:cell-style="cellStyle"

ref="table">

show-overflow-tooltip

width="100"

label="测试结果"

prop="testResult"

sortable>

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;

}