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

这篇具有很好参考价值的文章主要介绍了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 即不指定某个单元格文章来源地址https://www.toymoban.com/news/detail-568119.html

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


        },
        }

到了这里，关于element-ui table 指定单元格动态字体颜色设置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！