el-table 分组后根据数值的大小渲染渐变背景色长度

 

colorGradualChange(data) {
      let groups = [
        [
          "3F01S",
          "3F02C",
          "3F03S",
          "3F04C",
          "3F05S",
          "3F06C",
          "3F07C",
          "3F09S",
          "2F01S",
          "2F02S",
        ],
        [
          "4F01S",
          "4F02C",
          "4F03C",
          "4F04S",
          "4F05C",
          "4F06S",
          "4F07C",
          "4F09S",
        ],
        ["5F03C", "5F04C", "5F05C", "5F06C"],
        ["7F01C", "7F02S", "7F03S", "7F04C"],
      ];
      groups.forEach((group, j) => {
        const arr = [];
        for (const key of group) {
          data.slice(0, data.length - 2).forEach((value, index) => {
            value[key]
              ? arr.push({
                  value: (value[key] + "").replace("%", ""),
                  key: key,
                  rowIndex: index,
                })
              : "";
          });
        }
        this.ratio[j] = arr;
      });
    },

 tabCellStyle({ column, rowIndex, columnIndex }) {
      for (const item of this.ratio[0]) {
        if (column.property === item.key && rowIndex === item.rowIndex) {
          return (
            " background-color: #81CE9C; background-image: linear-gradient(to right, #81CE9C, #D4EEDD " +
            item.value * 100 +
            "%,white 0%);"
          );
        }
      }
      for (const item of this.ratio[1]) {
        if (column.property === item.key && rowIndex === item.rowIndex) {
          return (
            " background-color: #D70e81; background-image: linear-gradient(to right, #D70e81, #EA87BF " +
            item.value * 100 +
            "%,white 0%);"
          );
        }
      }
      for (const item of this.ratio[2]) {
        if (column.property === item.key && rowIndex === item.rowIndex) {
          return (
            " background-color: #098EEF; background-image: linear-gradient(to right, #098EEF, #BEE0FA " +
            item.value * 100 +
            "%,white 0%);"
          );
        }
      }
      for (const item of this.ratio[3]) {
        if (column.property === item.key && rowIndex === item.rowIndex) {
          return (
            " background-color: #6E95C9; background-image: linear-gradient(to right, #6E95C9, #D3DFEE " +
            item.value * 100 +
            "%,white 0%);"
          );
        }
      }
    },

效果图：