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>
相关推荐
十一吖i1 天前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保1 天前
tailwindcss暗色主题切换
开发语言·前端·javascript
生莫甲鲁浪戴1 天前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡1 天前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
菜鸟una1 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
拉不动的猪1 天前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子1 天前
nextTick的使用
前端·javascript·vue.js
Devil枫1 天前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript
惺忪97981 天前
回调函数的概念
开发语言·前端·javascript
小二·1 天前
从零开始:使用 Vue-ECharts 实现数据可视化图表功能
vue.js·信息可视化·echarts