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