elementui table 表格前三行数据标红

 1                             <el-table
 2                                                 :cell-class-name="tableCellClassName"
 3                                                 height="350px"
 4                                                 :data="tableData"
 5                                                 style="width: 100%">
 6                                             <el-table-column
 7                                                     type="index"
 8                                                     label="排名"
 9                                                     width="50">
10                                             </el-table-column>
11                                             <el-table-column
12                                                     prop="mineName"
13                                                     label="矿山名称"
14                                                     width="180">
15                                             </el-table-column>
16                                             <el-table-column
17                                                     prop="finishedRate"
18                                                     label="完成率">
19                                                 <template slot-scope="scope">
20                                                     <el-row>
21                                                         <el-col :span="18">
22                                                             <el-progress
23                                                                     :percentage=(scope.row.finishedRate)
24                                                             ></el-progress>
25                                                         </el-col>
26                                                         <el-col :span="6" >
27                                                             <div >
28                                                                 {{scope.row.finishedRate+"%"}}
29                                                             </div>
30                                                         </el-col>
31                                                     </el-row>
32                                                 </template>
33                                             </el-table-column>
34                                        </el-table>

js:

tableCellClassName({row, column, rowIndex, columnIndex}:any) {
            if (rowIndex === 0) {
                if (columnIndex==2){//第一行第三列标红
                    return 'warning-row';
                }
            }
            if (rowIndex === 1) {
                if (columnIndex==2){
                    return 'warning-row';
                }
            }
            if (rowIndex === 2) {
                if (columnIndex==2){
                    return 'warning-row';
                }
            }

 }

css:

/deep/.el-table .warning-row {
        color: #ec5656;
}

效果:

猜你喜欢

转载自www.cnblogs.com/yscec/p/12667938.html