element中table表格生成序號

scope.$index

        <el-table-column
              label="序號"
              align="center"
              width="80"
              >
                <template slot-scope="scope">
                  <div :class="listBgColor[scope.$index+1+myIndex]">
                    {{scope.$index+1+myIndex}}
                  </div>
                </template>
              </el-table-column>        

前三項加置頂背景

 data() {
    return {
    
      listBgColor: {
        '1': 'listBgFirst',
        '2': 'listBgSecond',
        '3': 'listBgTthird',
      },


    }
}

背景樣式

.listBgFirst{
  color:#fff;
  background: url("../../../assets/img/first.png") no-repeat
    center;
  background-position-x: 17px;
  background-size: 32px 20px;
}
.listBgSecond{
  color:#fff;
  background: url("../../../assets/img/second.png") no-repeat
    center;
  background-size: 32px 20px;
  background-position-x: 17px;
}
.listBgTthird{
  color:#fff;
  background: url("../../../assets/img/third.png") no-repeat
    center;
  background-size: 32px 20px;
  background-position-x: 17px;
}