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

注释：
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转RGBA
  const 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-table
        border 
        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： 数据从小到大颜色依次变浅。