首先需要了解俩个函数，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="success" 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>
// 修改样式 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;}