element-ui table 指定单元格动态字体颜色设置

element-ui table 指定单元格动态字体颜色设置

根据后端返回的值，动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值

一、指定单元格突出显示颜色，如：根据bug级别来显示不同的颜色值

<el-table
		ref="BugTable"
		:header-cell-style="{bgColor: #B5B5B5,fontColor:#000000,fontSize: 12px}"
		:cell-style="cellStyle"
		:key="tableKey"
		v-loading="listLoading"
		:data="list"
		stripe
		border
		fit
		highlight-current-row
		style="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
            }


        },
        }