element-ui table 指定單元格動態(tài)字體顏色設(shè)置

根據(jù)后端返回的值，動態(tài)的自動變更element-ui table 指定單元格的字體的顏色或者整行的顏色值

一、指定單元格突出顯示顏色，如：根據(jù)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 === '嚴(yán)重' && 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'
? ? ? ? ? ? }


? ? ? ? },
?? ??? ?}

顯示效果

二、整行顏色突出顯示，如：判斷某個字段的值為指定內(nèi)容時，改變整行的顏色值

去掉：?&& columnIndex === 4 即不指定某個單元格文章來源地址http://www.zghlxwxcb.cn/news/detail-568119.html

methods: {
? ? ? ? cellStyle({row, column, rowIndex, columnIndex}) {
? ? ? ? ? ? if (row.bugLevel === '致命') {
? ? ? ? ? ? ? ? return 'color: #FF0000'
? ? ? ? ? ? } else if (row.bugLevel === '嚴(yán)重') {
? ? ? ? ? ? ? ? return 'color: #ff9900'
? ? ? ? ? ? } else if (row.bugLevel === '一般') {
? ? ? ? ? ? ? ? return 'color: #3333ff'
? ? ? ? ? ? } else if (row.bugLevel === '輕微') {
? ? ? ? ? ? ? ? return 'color: #009933'
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return 'color: #666666'
? ? ? ? ? ? }


? ? ? ? },
?? ??? ?}

到了這里，關(guān)于element-ui table 指定單元格動態(tài)字體顏色設(shè)置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！