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

这篇具有很好参考价值的文章主要介绍了elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图如下：

首先 elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示,elementui,vue.js,javascript

首先：需要在表格行加入 <template slot-scope="{ row }"> </template>标签

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

 <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里面加入这个方法：

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

  fontLightClass(usable){
      if(usable == true){
    		return 'fgreen'
    }else{
      return 'fred'
    }
    },

3.去设置自己喜欢的颜色：

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

<style scoped>

.fred {
  color: red;
}
.fgreen {
  color: green;
}

</style>

//还有另一种（这种后端返回的数据里面带有背景色的字段）

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

 <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>

文章来源地址https://www.toymoban.com/news/detail-693291.html

到了这里，关于elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！