element-ui table 指定单元格动态字体颜色设置
根据后端返回的值，动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值
一、指定单元格突出显示颜色，如：根据bug级别来显示不同的颜色值
<el-tableref="BugTable":header-cell-style="{bgColor: '#B5B5B5',fontColor:'#000000',fontSize: '12px'}":cell-style="cellStyle":key="tableKey"v-loading="listLoading":data="list"stripeborderfithighlight-current-rowstyle="width:100%;"><el-table-column label="序号" prop="ID" align="center" width="70px" fit sortable></el-table-column><el-table-column label="禅道BugID" prop="bugID" align="center" width="110px" fit sortable></el-table-column><el-table-column label="Bug级别" prop="bugLevel" align="center" width="100px" fit sortable></el-table-column></el-table>
methods: {cellStyle({row, column, rowIndex, columnIndex}) {if (row.bugLevel === '致命' && columnIndex === 4) {return 'color: #FF0000'} else if (row.bugLevel === '严重' && columnIndex === 4) {return 'color: #ff9900'} else if (row.bugLevel === '一般' && columnIndex === 4) {return 'color: #3333ff'} else if (row.bugLevel === '轻微' && columnIndex === 4) {return 'color: #009933'} else {return 'color: #666666'}},}
显示效果
二、整行颜色突出显示，如：判断某个字段的值为指定内容时，改变整行的颜色值
去掉：&& columnIndex === 4 即不指定某个单元格
methods: {cellStyle({row, column, rowIndex, columnIndex}) {if (row.bugLevel === '致命') {return 'color: #FF0000'} else if (row.bugLevel === '严重') {return 'color: #ff9900'} else if (row.bugLevel === '一般') {return 'color: #3333ff'} else if (row.bugLevel === '轻微') {return 'color: #009933'} else {return 'color: #666666'}},}
