css
. el- table__body . el- table__row. hover- row td{ background- color: #083a78 ! important;
}
. el- table tbody tr: hover> td { background: #171F34 ! important;
}
html
< el- table ref = "multipleTable" : data= "gridData" : span- method= "cellMerge" style= "min-width: 1300px; white-space: nowrap" header- cell- class - name= "headerCellClassName" row- class - name= "rowClassName" cell- class - name= "cellClassName" > < ! -- show- summary : summary- method= "getSummaries" -- > < ! -- < el- table- column type= "index" label= "序号" > < / el- table- column> -- > < el- table- column prop= "projectName" label= "项目" fixed = "left" > < / el- table- column> < el- table- column prop= "areaName" label= "区域" fixed = "left" > < / el- table- column> < el- table- columnv- for = "(item,index) in gridData[0].dayList" ley= "index" > < template slot= "header" slot- scope= "scope" > { { item. dayName } } < / template> < template slot- scope= "scope" > { { gridData[ scope. $index] . dayList[ index] . dayDate } } < / template> < / el- table- column> < el- table- column prop= "heji" label= "月份合计" fixed = "right" > < / el- table- column> < el- table- column prop= "huanbi" label= "月份环比" fixed = "right" > < / el- table- column> < template slot= "empty" > < div class = "empty" > < img class = "empty_img" src= "@/assets/empty.png" / > < div> 暂无数据< / div> < / div> < / template> < / el- table>
JS
gridData: [ { projectName: '用水情况( 吨) ', areaName : '商铺', heji : '456 ', huanbi : '10 % ', dayList : [ { dayName: '1' , dayDate : '16 '} , { dayName: '2' , dayDate : '197 '} , { dayName: '3' , dayDate : '198 '} , { dayName: '4' , dayDate : '16 '} , { dayName: '5' , dayDate : '197 '} , ] , } , { projectName: '用水情况( 吨) ', areaName : '公寓', heji : '456 ', huanbi : '10 % ', dayList : [ { dayName: '1' , dayDate : '186 '} , { dayName: '2' , dayDate : '187 '} , { dayName: '3' , dayDate : '188 '} , { dayName: '4' , dayDate : '16 '} , { dayName: '5' , dayDate : '197 '} , ] , } , ]