一、需求及效果图

最近的项目中，遇到给表格中指定单元格设置字体颜色，使用的是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的，所以颜色一直设置不上！！！希望大家以后不要踩坑了哦~~