首先需要了解俩个函数，row-class-name、cell-class-name
这里以cell-class-name单元格样式为例
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String |
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String |
<el-table
ref="filterTable"
:data="applyData"
:cell-class-name="tableCellClassName"
style="width: 100%"
stripe
:span-method="objectSpanMethod"
:header-cell-style="{ 'text-align': 'center','background':'#5596F2','color':'#ffffff' }"
:row-style="{'padding':'5px 0px', 'height': '80px'}"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" fixed width="50" />
<el-table-column prop="wdmc" label="测1" width="300" />
<el-table-column prop="status" label="测2" width="110" />
<el-table-column label="测3" width="935" style="text-align:left">
<template slot-scope="scope">
<el-steps :active="scope.row.active" space="350px" finish-status="su***ess" process-status="process">
<el-step v-for="item,i in scope.row.SubNode" :key="i" :title="`${item.TaskDesc}：${item.User}`" :status="item.processStatus">
<template slot="description">
<!-- <span v-if="item.TaskDesc != '申请人提交' && item.TaskDesc != '审批通过'">审批意见：{{ item.opinion }}</span><br> -->
<span>{{ item.Time }}</span>
</template>
</el-step>
</el-steps>
</template>
</el-table-column>
</el-table>
javascript">// 修改样式
tableCellClassName(cel) {
// 行中数据满足某个条件时class设置为bordertop
if (cel.row.isBorder) {
return 'bordertop'
} else {
return 'zcbordertop'
}
}::v-deep .bordertop{
border-top: 2px solid #409EFF;
text-align: center;
padding: 7px 0px;
}
::v-deep .zcbordertop{
text-align: center;
padding: 7px 0px;
}