elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示

效果图如下：

首先

首先：需要在表格行加入 <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>