效果圖如下：
首先
首先：需要在表格行加入?<template slot-scope="{ row }">?</template>標(biāo)簽
<el-table-column prop="usable" align="center" label="狀態(tài)" width="180" >
<template slot-scope="{ row }">
<span :class="fontLightClass(row.usable)">{{ row.usable ==true ? "啟用" : "停用"}}</span>
</template>
</el-table-column>?2.在methods里面加入這個(gè)方法：
fontLightClass(usable){
if(usable == true){
return 'fgreen'
}else{
return 'fred'
}
},?3.去設(shè)置自己喜歡的顏色：
<style scoped>
.fred {
color: red;
}
.fgreen {
color: green;
}
</style>//還有另一種（這種后端返回的數(shù)據(jù)里面帶有背景色的字段）
<el-table-column prop="risk_level_name" align="center" label="風(fēng)險(xiǎn)等級(jí)" width="180" >
<template slot-scope="{ row }">
<div
:style="{
marginLeft: 18 + '%',
textAlign: 'center',
width: 98 + 'px',
color: '#333333 !important',
backgroundColor: 'rgb(' + row.color_value + ')',
}">
<label>{{ row.risk_level_name }}</label>
</div>
</template>
</el-table-column>?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-693291.html文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-693291.html
?
到了這里，關(guān)于elementUi中的el-table表格的內(nèi)容根據(jù)后端返回的數(shù)據(jù)用不同的顏色展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
