方式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>

總結

以上是生活随笔為你收集整理的element-ui中el-table的表头、内容样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。