注意：
正數前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);}},
效果圖：
)
