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;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM