一、需求及效果图

最近的项目中，遇到给表格中指定单元格设置字体颜色，使用的是el-table做的，控制单元格字体颜色，每一行的最大值设置成绿色，最小值设置成红色，效果如下：

二、方法及代码

使用的是控件内的 cell-style 方法，方法详见element-ui，代码如下：

<!-- HTML代码 -->
<el-table:data="populationComparisonTableData"borderwidth= '952':cell-style="cellStyle"v-loading="tableLoading"style="width: 100%"><el-table-columnv-for="(item,index) in tableHeadArr":key="index":prop="item.prop":label="item.name":formatter="addPercent"height="40"align="center"></el-table-column>
</el-table>

方法一代:

// methods中写方法
cellStyle ({ row, column, rowIndex, columnIndex } ) {let arr = []; // 保存一行数据的数组for(let item in row) {if (item !== 'people_type') {arr.push(Number(row[item]));}}if (columnIndex - 1 === arr.indexOf(Math.max.apply(null, arr))) {// arr.indexOf(Math.max.apply(null, arr)能找到最大值的下标，// 与其对应列相等即返回绿色,//此处 columnIndex - 1 是因为第一列不是数字，arr中也不包含这部分return 'color: #138D39'; // 绿色,最大值}if (columnIndex - 1 === arr.indexOf(Math.min.apply(null, arr))) {return 'color: #FF3B4B';}
}

但是这么做有一个问题，就是如果最大值或者最小值，有重复的，就只能找到第一个最大（小）值，设置颜色，所以总感觉不太完美，于是咔咔咔的改进。

方法二代：

想到用两个数组分别保存最大值、最小值的下标，在遍历数组设置颜色即可，代码如下：

cellStyle ({ row, column, rowIndex, columnIndex } ) {let arr = []; // 保存一行数据的数组for(let item in row) {if (item !== 'people_type') {arr.push(Number(row[item]));}}let maxIndex = 0, minIndex = 0,minIndexArr = [],maxIndexArr = [];maxIndex = arr.indexOf(Math.max.apply(null, arr));minIndex = arr.indexOf(Math.min.apply(null, arr));arr.forEach((item, index) => {if (item === arr[minIndex]) {minIndexArr.push(index);}if (item === arr[maxIndex]) {maxIndexArr.push(index);}});if (minIndexArr.indexOf(columnIndex - 1) >= 0) {return 'color: #FF3B4B';}if (maxIndexArr.indexOf(columnIndex - 1) >= 0) {return 'color: #138D39';}
},

踩坑过程：

方法二代一开始我是这样写的：

cellStyle ({ row, column, rowIndex, columnIndex } ) {let arr = []; // 保存一行数据的数组for(let item in row) {if (item !== 'people_type') {arr.push(Number(row[item]));}}let maxIndex = 0, minIndex = 0,minIndexArr = [],maxIndexArr = [];maxIndex = arr.indexOf(Math.max.apply(null, arr));minIndex = arr.indexOf(Math.min.apply(null, arr));arr.forEach((item, index) => {if (item === arr[minIndex]) {minIndexArr.push(index);}if (item === arr[maxIndex]) {maxIndexArr.push(index);}});minIndexArr.forEach((item, index) => {if (item === minIndex) {return 'color: #FF3B4B'; // 这里根本设置不上颜色}});maxIndexArr.forEach((item, index) => {if (item === maxIndex) {return 'color: #138D39';}});
}

后来知道原因了，foreach里写return会直接跳过此次循环，执行下次循环，而这样写外部函数实际上是没有return的，所以颜色一直设置不上！！！希望大家以后不要踩坑了哦~~

如何给el-table表格的指定单元格设置颜色相关推荐

html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
第2关：爬取表格中指定单元格的信息
任务描述行标签和单元格标签 find_all函数获取标签文本编程要求任务描述本关任务: 本关任务:根据上个步骤中爬取的表格标签,将表格中从第四行的单元格的文本显示出来行标签和单元格标签表 ...
layui的table表格在同一单元格换行显示2个数据（layui-table）
转自:https://blog.csdn.net/qq15577969/article/details/104109430 先看一下最终效果图: 查看全文 http://www.taodudu.cc/ ...
记录：element UI table 表格固定列单元格上下错位
一.表格添加ref <el-table ref="table"></el-table> 二.页面切换或数据更新时调用 this.$nextTick(() = ...
解决element UI table 表格固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...
table表格表头合并单元格问题
1.效果图 2.代码 <thead><tr><th rowspan="2">班级</th><th rowspan=" ...
LayUI 数据表格 table表格在同一单元格换行显示2个数据一个单元格放2个数据或多个数据
具体的自己实现去,我这里上思路和关键点 1.头部添加高度自适应 <style>.layui-table-cell {height: auto;} </style> </h ...
pyqt tableWidget 单元格设置颜色
#字体颜色(红色) self.tableWidget_Software.item(1 ,0).setForeground(QBrush(QColor(255,0,0)))#背景颜色(红色) self. ...

如何给el-table表格的指定单元格设置颜色