element-ui中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>

你可能感兴趣的:(element-ui,表格)