elementUI-table利用index给前三设置不同的颜色及样式

vue组件部分
使用elementUI的table，利用index给前三设置不同的颜色及样式
关键要素：scope.$index+1

<template>
  <div class="thematicResources">
      <el-table ref="singleTable" :data="deptData" highlight-current-row :show-header="false" style="width: 100%">
        <el-table-column type="index" width="50"> 
            <template slot-scope="scope">
                <span v-if="scope.$index+1 ==1" class="no1">{{scope.$index+1}}</span>
                <span v-else-if="scope.$index+1 ==2" class="no2">{{scope.$index+1}} </span>
                <span v-else-if="scope.$index+1 ==3" class="no3">{{scope.$index+1}} </span>
                <span v-else class="no">{{scope.$index+1}} </span>
            </template>
        </el-table-column>
        <el-table-column prop="name" width="200" label="部门" >  </el-table-column>
        <el-table-column  prop="value" label="数量"> 
            <template scope="scope">
                <span v-if="scope.$index+1 ==1" style="color:#FF545B">{{ scope.row.value }}</span>
                <span v-else-if="scope.$index+1 ==2" style="color: #FCBC24">{{ scope.row.value }}</span>
                <span v-else-if="scope.$index+1 ==3" style="color: #0AF9D8">{{ scope.row.value }}</span>
                <span v-else style="color: #36BAFF">{{ scope.row.value }}</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

js部分

<script>
export default {
  components: {},
  data() {
    return {
      deptData: [],
    };
  },
  computed: {
  },
  mounted() {
    this.initTableData()
  },
  beforeDestroy() {},
  methods: {
    //数组排序
    sortData(arr){
      for(let i=0;i<arr.length-1;i++){
        for(let j=0;j<arr.length-1-i;j++){
          if(arr[j].value < arr[j+1].value){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
          }
        }
      }
      return arr
    },
    //获取表格数据
    initTableData(){
      this.deptData=[];
        let alldata=this.sortData(ThematicResourcesConfig.departmentalData);
        //引入数据文件，ThematicResourcesConfig.departmentalData本地数据
        console.log(alldata)
        for(let i=0;i<alldata.length;i++){
          this.deptData.push(alldata[i])
          if(i==9){//top10
            break
          }
        }
    },
  }
}
</script>

css部分
yellow-bg.png这些即为不同的背景图片

.no1{
    display: inline-block;
    text-align: center;
    background-image: url("../../../../../static/img/lz-data-monitor/red-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
  .no2{
    display: inline-block;
    text-align: center;
    background-image: url("../../../../../static/img/lz-data-monitor/yellow-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
  .no3{
    display: inline-block;
    text-align: center;
    background-image: url("../../../../../static/img/lz-data-monitor/green-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
  .no{
    display: inline-block;
    text-align: center;
    background-color: #007EFF;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
  }

数据文件部分，可以从后台接口获取，此处为了测试制造的静态数据

var ThematicResourcesConfig = ThematicResourcesConfig || {};
(function () {
  var ThematicResourcesConfigColor = ["#8e71c7", "#13CE66", "#F36868", "#8e71c7", "#13CE66", "#F36868"]
  ThematicResourcesConfig = {
    departmentalData: [{
        value: 14,
        name: "住建委"
      },
      {
        value: 14,
        name: "卫计委"
      },
      {
        value: 16,
        name: "园林局"
      },
      {
        value: 639,
        name: "自然资源与规划局"
      }, {
        value: 25,
        name: "地震局"
      },
      {
        value: 39,
        name: "统计局"
      },
      {
        value: 13,
        name: "卫生局"
      },
      {
        value: 14,
        name: "教育局"
      }, {
        value: 20,
        name: "交通局"
      },
      {
        value: 13,
        name: "旅游局"
      },
      {
        value: 3,
        name: "文物局"
      },
      {
        value: 5,
        name: "公安局"
      },
      {
        value: 107,
        name: "执法局"
      },
      {
        value: 24,
        name: "环保局"
      },
      {
        value: 89,
        name: "发改委"
      }
    ],
    
  }
 
})()