复制代码到编译器直接用查看即可
elementUI官方文档地址:
https://element.eleme.cn/#/zh-CN/component/table#table-slot
表格属性查看属性Table Attributes
1.表头样式属性: header-cell-style
2.表格样式属性: cell-style
看代码
第一种写行间样式写法:
<el-table
:header-cell-style="{
backgroundColor: 'red',
fontSize: '14px',
color: '#242424'
}"
:cell-style="{ backgroundColor: 'pink', fontSize: '16px', color: 'blue' }"
>
<el-table-column prop="time" label="时间" width="90" align="left"> </el-table-column>
<el-table-column prop="infoCount" label="量" width="90" align="center"> </el-table-column>
<el-table-column prop="infoPrice" label="金额" width="90" align="center"> </el-table-column>
<el-table-column prop="averagePrice" label="均价" width="90" align="right"> </el-table-column>
</el-table>
第二种写在js:
<el-table :data="sellMsgData" :header-cell-style="getHeaderStyle" :cell-style="getCellStyle">
<el-table-column prop="time" label="时间" width="90" align="left"> </el-table-column>
<el-table-column prop="infoCount" label="量" width="90" align="center"> </el-table-column>
<el-table-column prop="infoPrice" label="金额" width="90" align="center"> </el-table-column>
<el-table-column prop="averagePrice" label="均价" width="90" align="right"> </el-table-column>
</el-table>
写在methods方法里面
// 表头样式
getHeaderClass({ row, column, rowIndex, columnIndex }) {
return 'background:pink; color:#fff;border:1px solid red;textAlign:center;';
},
// 表格奇偶层样式
getCellStyle({}) {
if ((rowIndex + 1) % 2 === 0) {
return 'background:red; color:#fff;border:1px solid black';
} else {
return 'background:pink; color:#fff;border:1px solid blue';
}
},