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

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

news 2025/8/27 7:18:46

注释：
vue2+elementui 表格列实现一个功能，给定两个颜色：红色 #f96d6f 和绿色 #63be7b，列数据正数时表格单元格背景色为红色，列数据负数时表格单元格背景色为绿色，根据数据的大小颜色依次越来越淡，最大的正数颜色最红，剩下的正数从大到小依次根据这个红色变浅，最小的负数颜色最绿，剩下的负数从小到大依次根据这个绿色变浅。
此方法中最后一行数据颜色固定显示，有做单独处理，不参与这个方法

封装一个js方法：

/*** 增强版表格颜色渐变方法* @param {Array} columnData 当前列所有数据* @param {String} baseColor 基础色(#f96d6f/#63be7b)* @param {Number} currentValue 当前单元格值* @returns {String} 背景色样式*/
function getEnhancedColor(columnData, baseColor, currentValue) {// 分离正负数并去重排序const positives = [...new Set(columnData.filter(v => v > 0))].sort((a,b) => b-a);const negatives = [...new Set(columnData.filter(v => v < 0))].sort((a,b) => a-b);// 计算动态透明度（0.2-1.0区间）let opacity = 0.2;if (currentValue > 0 && positives.length) {const rank = positives.indexOf(currentValue);opacity = 0.2 + (0.8 * (1 - rank/positives.length));} else if (currentValue < 0 && negatives.length) {const rank = negatives.indexOf(currentValue);opacity = 0.2 + (0.8 * (1 - rank/negatives.length));}else {return ''; // 零值不染色}// HEX转RGBAconst r = parseInt(baseColor.slice(1,3), 16);const g = parseInt(baseColor.slice(3,5), 16);const b = parseInt(baseColor.slice(5,7), 16);return `background-color: rgba(${r}, ${g}, ${b}, ${opacity.toFixed(2)});`;
}/*** ElementUI表格列颜色处理器* @param {Object} params 单元格参数* @param {Array} allData 表格数据* @param {String} prop 字段名*/
export function columnColorHandler(params, allData, prop) {const { row,rowIndex } = params;const columnData = allData.map(item => item[prop]);const value = row[prop];// 最后一行特殊处理if (rowIndex === allData.length - 1) {return "background-color: #990000; color: #fff; font-weight: bold;";}if (value > 0) {return getEnhancedColor(columnData, '#f96d6f', value);} else if (value < 0) {return getEnhancedColor(columnData, '#63be7b', value);}return '';}

表格中使用（:cell-style=“cellStyle”）

<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({ row, column, rowIndex, columnIndex },this.tableData,column.property);}},