注釋：
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);}},

這個方法最終效果是根據給定的基礎色：
紅色#f96d6f： 數據從大到小顏色依次變淺；
綠色 #63be7b： 數據從小到大顏色依次變淺。