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>
相关推荐
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
用户785127814702 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫3 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
bot5556663 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室3 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
曦曜2923 小时前
富文本编辑器
javascript
多啦C梦a3 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
zhangzelin8884 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript