根据不同的值表格单元格显示不同的背景色

每个表格单元格显示不同的颜色

<template>
  <div class="table-warp">
    <el-table
      id="tables"
      :data="tableData"
      border
      style="width: 100%;height: 100%;"
      :header-cell-style="{
        color: '#333',
      }"
      :cell-class-name="hanedlBg">
      <el-table-column
        v-for="(item,i) in tableHeader"
        :key="i"
        :prop="item.prop"
        :label="item.name">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableHeader: [ //表头信息
        {
        "prop": "cur", //表头空白单元格信息
        "name": ""
        },
        {
        "prop": "age", 
        "name": "年龄" 
        },
        {
        "prop": "address",
        "name": "地址"
        },
        {
        "prop": "phone",
        "name": "电话"
        }
      ],
      tableData: [
        {
          cur:'kkk',
          age: '0.4',
          address: '0.3',
          phone: "0.7",
        }, {
          cur:'lll',
          age: '0.13',
          address: '0.9',
          phone: "0.6",
        },
      ],
    }
  },
  methods:{
    //表格单元格背景色
    hanedlBg({row, column, rowIndex, columnIndex}){
      let colors = [];
      //需求有多少种颜色，就定义多少个类名，每个类中设置一个颜色
      for (var x = 20; x >=1; x --) {
        //类名数组
        colors.push(`bg${x}`);
      }
      
      for(var i = 0; i < this.tableHeader.length; i ++){
        for(var j = 0; j < this.tableHeader.length; j ++){
          if(rowIndex == i && columnIndex == j){
            //拿到每个单元格的值
            let val = Number(Object.values(row)[j]);
            //把每个单元格的值 和 数组的下标 做对应
            //（比如：单元格的值在-1到1之间，数组的下标在0到19之间，这就要需要把单元格的值先加1，然后再扩大10倍，这样，就能和数组的下标对应起来）
            let value = Math.floor((val + 1.0 - 0.09) * 10);//0.9572
            console.log(val, value, colors[value])
            //和哪个数组的下标对应就返回哪个类名
            //（比如，value的值为6，那么就返回colors数组中的第7个类名）
            return colors[value]
          }
        }
      }
      
    },
  }
}

</script>

<style lang='scss' scoped>
.table-warp{
  position: relative;
  display: flex;
  $colorList: #2161F0 #377CF1 #4D8BF3 #6399f4 #7AA8f6 #90B6F7 #A6C5F9 #BCD3FA #D3E2FC #E8F0FD #FCEEE9 #FBDDD4 #F8CCBE #F6BBA9 #F4AA93 #F2997E #EF8868 #ED7753 #EB663D #E95528;
  ::v-deep .el-table {
    @each $color in $colorList {
      $i: index($colorList, $color);
      .bg#{$i} {
        background-color: $color;
        // width: 80px;
        // height: 60px;
      }
      .bg1 {
        color: #2161F0;
      }
    }
  }
  ::v-deep .el-table tr td{
    pointer-events: none;  //去掉划过效果
    text-align: center;
    color: #FFFFFF;
    font-weight: 500;
  }
  ::v-deep .el-table tr td:first-child{
    color: #333;
    font-weight: 500;
  }
}
</style>

效果：