效果图如下:
首先
首先:需要在表格行加入 <template slot-scope="{ row }"> </template>标签
<el-table-column prop="usable" align="center" label="状态" width="180" >
<template slot-scope="{ row }">
<span :class="fontLightClass(row.usable)">{{ row.usable ==true ? "启用" : "停用"}}</span>
</template>
</el-table-column>
2.在methods里面加入这个方法:
fontLightClass(usable){
if(usable == true){
return 'fgreen'
}else{
return 'fred'
}
},
3.去设置自己喜欢的颜色:
<style scoped>
.fred {
color: red;
}
.fgreen {
color: green;
}
</style>
//还有另一种(这种后端返回的数据里面带有背景色的字段)
<el-table-column prop="risk_level_name" align="center" label="风险等级" 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>