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'
            }

        },
        }