【例子1】
// 调用方法的部分为:
<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"
【例子2】
<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>
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;
}