给element ui 的table中的每一行增加样式

需求

现在做的项目是要求给表格中的前三位增加第一金牌第二银牌第三铜牌的一个需求

思路

跟据表格中每一行的索引来决定第一、第二、第三，然后分别给他对应的css样式

效果

第一步

第二步

第三步

完整代码如下：

html代码

           <div>
                <el-table v-loading="loading"
                          header-row-class-name="headerRow"
                          header-cell-class-name="headerCell"
                          :row-class-name="tableRowClassName"
                          :data="tableData"
                          class="w100 mt20">
                    <el-table-column prop=""
                                     label=""
                                     width="40"></el-table-column>
                    <el-table-column prop="date"
                                     label="排名"></el-table-column>
                    <el-table-column prop="name"
                                     label="商户名"></el-table-column>
                    <el-table-column prop="address"
                                     label="商户地址"></el-table-column>
                    <el-table-column prop="time"
                                     label="开户日期"></el-table-column>
                    <el-table-column prop="TotalAmount"
                                     label="订单总额"></el-table-column>
                </el-table>
            </div>

js 代码

        tableRowClassName ({ row, rowIndex }) {
            console.log(rowIndex);
            if (rowIndex === 0) {
                return 'warning-row'
            } else if (rowIndex === 1) {
                return 'weight-row'
            } else if (rowIndex === 2) {
                return 'success-row'
            }
            return ''
        }

css代码

        /deep/.el-table .warning-row {
            background-image: url(../../image/jin.png);
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: left 0px top 5px;
        }
        /deep/.el-table .weight-row {
            background-image: url(../../image/yin.png);
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: left 0px top 5px;
        }
        /deep/.el-table .success-row {
            background-image: url(../../image/tong.png);
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: left 0px top 5px;
        }

第一次写这种需求，记录一下，希望可以帮到更多的人。