表格中添加渐变色带，表格中添加多色色带，el-table中添加渐变色带，elementUI表格添加色带

    <el-table :data="rankingDataFormatted" stripe>
    <el-table-column prop="ranking" label="Rank" width="100"></el-table-column>
    <el-table-column prop="cityName" label="Country" width="200"></el-table-column>
    <el-table-column prop="score" label="Score" width="200"></el-table-column>
    <el-table-column label="Performance">
      <template v-slot="scope">
        <!-- 动态绑定样式，通过getBackgroundColor获得色带 -->
        <div :style="{background: getBackgroundColor(scope.row.score), height: '20px'}"></div>
      </template>
    </el-table-column>
  </el-table>

const getBackgroundColor = (score) =>{
    const percentage = score / 100;
      const filledPercentage = Math.min(percentage, 1); 
      const filledColorHead = '#95CCDE'; 
      const filledColorFoot = '#A9B2D4'; 
      const emptyColor = '#EEEEEE'; 
      return `linear-gradient(to right, ${filledColorFoot}, ${filledColorHead} ${filledPercentage * 100}%, ${emptyColor} ${filledPercentage * 100}%)`;
}

    <el-select
      v-model="selectedDimension"
      multiple
      placeholder="Select"
      style="width: 190px"
    >
      <el-option
        v-for="item in dimensionColors"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <div class="flex items-center">
          <el-tag :color="item.value" style="margin-right: 8px" size="small" />
          <span :style="{ color: item.value }">{{ item.label }}</span>
        </div>
      </el-option>
      <template #tag>
        <el-tag
          v-for="color in selectedDimension"
          :key="color.value"
          :color="color"
        />
      </template>
    </el-select>

  <el-card class="container">
    <el-table :data="rankingDetailData" stripe>
      <el-table-column type="index" label="Rank" width="100"></el-table-column>
      <el-table-column
        prop="cityName"
        label="Country"
        width="200"
      ></el-table-column>
      <el-table-column label="Score" width="200" sortable="custom">
        <template v-slot="scope">
          <!-- 实现可变数据的动态排序 -->
          {{ formatScore(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="Performance">
        <template v-slot="scope">
          <div
            :style="{
              background: getBackgroundColor(scope.row),
              height: '20px',
            }"
          ></div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

// 各维度颜色
const dimensionColors = ref([
  {
    value: "#FF6600",
    label: "创新发展",
  },
  {
    value: "#FFDE0A",
    label: "协调发展",
  },
  {
    value: "#1EC79D",
    label: "绿色发展",
  },
  {
    value: "#14CCCC",
    label: "开放发展",
  },
  {
    value: "#4167F0",
    label: "共享发展",
  },
]);

// 选中的维度
const selectedDimension = ref([]);

// 将所有维度颜色添加到初始框中
dimensionColors.value.forEach((color) => {
  selectedDimension.value.push(color.value);
});

// 搞定多维度的色带
const getBackgroundColor = (row) => {
  // 先定下来颜色
  const innovationColor = "#FF6600";
  const operateColor = "#FFDE0A";
  const greenColor = "#1EC79D";
  const openColor = "#14CCCC";
  const sharingColor = "#4167F0";
  const emptyColor = "#EEEEEE";

  var arr = [];
  // 将选中的颜色放到arr中，arr用来确定选择框里面放什么颜色
  selectedDimension.value.forEach((element) => {
    dimensionColors.value.forEach((item) => {
      if (item.value == element) {
        var data = {};
        data.dimension = item.label;
        data.score = Number(row[item.label]);
        arr.push(data);
        return;
      }
    });
  });

  // 产出色带，百分号里面的数据可以减去0.3，能添加柔和效果
  return `linear-gradient(to right, 
    ${innovationColor} 0%, ${innovationColor} ${arraySum(arr, 1)}%, 
    ${operateColor} ${arraySum(arr, 1)}%, ${operateColor} ${arraySum(arr, 2)}%, 
    ${greenColor} ${arraySum(arr, 2)}%, ${greenColor} ${arraySum(arr, 3)}%, 
    ${openColor} ${arraySum(arr, 3)}%, ${openColor} ${arraySum(arr, 4)}%, 
    ${sharingColor} ${arraySum(arr, 4)}%, ${sharingColor} ${arraySum(arr, 5)}%,
    ${emptyColor} ${arraySum(arr, 5)}%, ${emptyColor} 100%)`;
};

// 数组求和方法，适用于getBackgroundColor方法
const arraySum = (arr, n) => {
  let sum = 0;

  var dimensionOrder = [
    "创新发展",
    "协调发展",
    "绿色发展",
    "开放发展",
    "共享发展",
  ];

  for (let i = 0; i < n; i++) {
    arr.forEach((item) => {
      if (item.dimension == dimensionOrder[i]) {
        sum += item.score;
      }
    });
  }
  return sum;
};