当前位置：首页 > java >正文

vue2+elementui 表格单元格增加背景色，根据每列数据的大小颜色依次变浅显示2

java 2025/8/27 8:01:59

注意：
正数前5和负数后5的颜色是固定的，剩下5之后的数据颜色是根据第5个颜色依次变浅的；

封装的js方法：

/*** 最终版表格颜色处理器* @param {Array} data 完整表格数据* @param {String} field 当前字段名* @param {Object} row 当前行数据* @param {Number} index 行索引* @returns {String} CSS样式字符串*/
export function columnColorHandler(data, field, row, index) {// 最后一行特殊处理if (index === data.length - 1) {return 'background-color: #990000; color: white';}const value = row[field];// 排除最后一行参与排名计算const validData = data.slice(0, -1).map(item => item[field]);// 正数处理（前5名强化）if (value > 0) {const positives = [...new Set(validData.filter(v => v > 0))].sort((a,b) => b - a);const rank = positives.indexOf(value);// 前5名使用阶梯红色if (rank >= 0 && rank < 5) {const redPalette = ['#f8696b', '#fa9597', '#fbbdc0', '#fbd0d2', '#fcdddf'];return `background-color: ${redPalette[rank]}`;}// 其他正数渐变const opacity = 0.1 + (0.4 * (1 - rank/positives.length));return `background-color: rgba(252,221,223, ${opacity.toFixed(2)})`;} // 负数处理（后5名强化）else if (value < 0) {const negatives = [...new Set(validData.filter(v => v < 0))].sort((a,b) => a - b);const rank = negatives.indexOf(value);// 后5名使用阶梯绿色if (rank >= 0 && rank < 5) {const greenPalette = ['#63be7b', '#73c489', '#a5d8b4', '#cde9d6', '#e1f1e7'];return `background-color: ${greenPalette[rank]}`;}// 其他负数渐变const opacity = 0.1 + (0.4 * (1 - rank/negatives.length));return `background-color: rgba(225,241,231,  ${opacity.toFixed(2)})`;}return ''; // 零值无背景
}

vue文件中使用：

先导入方法：

import { columnColorHandler } from "@/utils/colorGradient";

表格中使用：

<el-tableborder stripe v-loading="isLoading"style="width: 85%;margin: 20px auto;"highlight-current-row:header-cell-style="headerCellStyle()":cell-style="cellStyle"@sort-change="sortChange":data="tableData"ref=""><el-table-column prop="industryName" label="行业" align="center" min-width="100" show-overflow-tooltip><template slot-scope="scope"><div>{{ scope.row.industryName || '-' }}</div></template></el-table-column><el-table-column prop="indWeight" label="组合权重" align="center" sortable="custom" min-width="95"><template slot-scope="scope"><div>{{ formatterData(scope.row.indWeight) }}</div></template></el-table-column><el-table-column prop="bmIndWeight" label="基准权重" align="center" sortable="custom" min-width="95"><template slot-scope="scope"><div>{{ formatterData(scope.row.bmIndWeight) }}</div></template></el-table-column><el-table-column prop="exWeight" label="超额" align="center" sortable="custom"><template slot-scope="scope"><div>{{ formatterData(scope.row.exWeight) }}</div></template></el-table-column></el-table>

cellStyle方法中设置单元格背景色：column.property 根据实际情况来，哪一列需要就添加哪一列：

cellStyle({row, column, rowIndex, columnIndex}) {if(column.property === 'indWeight' || column.property === 'bmIndWeight' || column.property === 'exWeight' || column.property === 'indReturn' || column.property === 'bmIndReturn'|| column.property === 'exReturn' || column.property === 'iait' || column.property === 'ssit' || column.property === 'init1' || column.property === 'total'){return columnColorHandler(this.tableData,column.property,row,rowIndex);}},