方式1:
直接在标签上添加上属性值:
<el-table:header-cell-style="{background:'#F3F4F7',color:'#555'}"
></el-table>
方式2:
在method里面写上方法:
rowClass({ row, rowIndex}) {console.log(rowIndex) //表头行下标return 'background:#F3F4F7;color:#555'
}
然后在el-table标签中使用方法:
<el-table :header-cell-style="rowClass"></el-table>
element-ui中el-table的表头、内容样式
<el-table :data="list" style="width: 100%" :border="border" //是否显示边框stripe //是否显示斑马纹:header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900}" //表头字体样式:row-style="{fontSize:'12px',color:'#666',fontFamily:'MicrosoftYaHeiUI'}" //表内容字体样式:row-class-name="tabRowClassName" //单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className
><el-table-column prop="name" label="名称" align="center" ></el-table-column>
</el-table>data(){
return{border:true,stripe:true,
}
methods:{tabRowClassName({row,rowIndex}){let index = rowIndex + 1;if(index %2 == 0){return 'warning-row'}}
}
}
<styel>
.el-table .warning-row{background:#F3F9FF
}
</style>