VUE|el-table-column表格根据不同值，显示不同颜色

最新推荐文章于 2026-02-10 11:51:53 发布

原创最新推荐文章于 2026-02-10 11:51:53 发布 · 9.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

https://blog.csdn.net/craftsman2020

收录于

Vue

当前文章被收录于：

Vue

16 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

代码可运行

本文介绍了如何在Vue前端项目中，使用Element UI的el-table-column组件根据表格内容动态设置单元格颜色。示例代码展示了当log字段包含'ERR'时显示红色，否则显示灰色的方法，并提供了包含搜索功能的表头模板。

文章目录

- - 1. 代码
  - 2. 效果图

vue前端|element|el-table-column表格颜色|根据内容设置表格颜色

1. 代码

<el-table-column
  prop="log"
  label="Diy Log"
  height="10"
  sortable
  min-width="690">
  <template slot-scope="scope">
    <div :style="{'color':scope.row.log.indexOf('ERR')!=-1?'red':'#333'}">{{scope.row.log}}</div>
  </template>
  <template slot="header" slot-scope="scope">
    <el-input
      v-model="search"
      size="mini"
      placeholder="输入关键字搜索"/>
  </template>
</el-table-column>