element官方文档:
https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot
一、设置表头样式
需求:将表头样式改为背景色蓝色,字体颜色白色,字重400
1.字符串形式:直接将tableStyle名称赋值给header-cell-class-name
<el-table
:data="tableData[lang]"
border
:header-cell-style='tableHeaderStyle'
>
说明:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
类型:Function({row, column, rowIndex, columnIndex})/Object
函数形式:将tableHeaderStyle方法传递给header-cell-style
编写tableHeaderStyle方法,返回样式
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
return 'background-color:#1989fa;color:#fff;font-weight:400;'
}
2.对象形式:直接在对象中编写样式
<el-table
:data="tableData[lang]"
border
:header-cell-style="{
'background-color': '#1989fa',
'color': '#fff',
'font-weight': '400'
}">
二、设置行样式
需求:将表格中行的字体颜色设置为浅蓝色
1.row-class-name
Function({row, rowIndex})/String
省略代码
2.row-style
Function({row, rowIndex})/Object
<el-table
:data="tableData"
border
:row-style="tableRowStyle"
>
编写tableRowStyle方法,返回样式
// 修改table tr行的字体
tableRowStyle ({ row, rowIndex }) {
return 'color:#ecf5ff'
}
三、设置列样式
<el-table
:data="tableData"
border
:cell-style="cellStyle"
>
/*cellStyle({row,column,rowIndex,columnIndex}){
return "font-size:15px;color:red;"
},*/
cellStyle({column,columnIndex}){
return "font-size:15px;color:red;"
},
四、设置行列综合写法
<el-table
:data="tableData"
border
:cell-style="cellStyle"
>
cellStyle({row,column,rowIndex,columnIndex}){
return "font-size:15px;color:red;"
},