1 <el-table 2 :cell-class-name="tableCellClassName" 3 height="350px" 4 :data="tableData" 5 style="width: 100%"> 6 <el-table-column 7 type="index" 8 label="排名" 9 width="50"> 10 </el-table-column> 11 <el-table-column 12 prop="mineName" 13 label="矿山名称" 14 width="180"> 15 </el-table-column> 16 <el-table-column 17 prop="finishedRate" 18 label="完成率"> 19 <template slot-scope="scope"> 20 <el-row> 21 <el-col :span="18"> 22 <el-progress 23 :percentage=(scope.row.finishedRate) 24 ></el-progress> 25 </el-col> 26 <el-col :span="6" > 27 <div > 28 {{scope.row.finishedRate+"%"}} 29 </div> 30 </el-col> 31 </el-row> 32 </template> 33 </el-table-column> 34 </el-table>
js:
tableCellClassName({row, column, rowIndex, columnIndex}:any) { if (rowIndex === 0) { if (columnIndex==2){//第一行第三列标红 return 'warning-row'; } } if (rowIndex === 1) { if (columnIndex==2){ return 'warning-row'; } } if (rowIndex === 2) { if (columnIndex==2){ return 'warning-row'; } } }
css:
/deep/.el-table .warning-row {
color: #ec5656;
}
效果: