效果图如下:
首先
首先:需要在表格行加入 <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>