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>
相关推荐
前端工作日常27 分钟前
我学习到的Vue2.6的prop修饰符
vue.js
gnip35 分钟前
JavaScript事件流
前端·javascript
小菜全1 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
ST.J1 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪1 小时前
回顾vue中的Props与Attrs
前端·javascript·面试
耶啵奶膘2 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app