表格头的样式直接通过给el-table绑定header-cell-style来控制
表格的列通过绑定element给的cell-style回调方法来控制样式,表格行的样式控制官方也给了row-style回调方法
<el-table
:data="tableData"
border
style="width: 100%"
:cell-style="cellStayle"
:header-cell-style="{background:'#F7F8FA', fontSize: '14px',fontWeight: '600',color: '#485364'}"
>
<el-table-column
prop="sex"
label="性别"
width="100"
align="center"
/>
<el-table-column
prop="time"
label="时间"
align="center"
/>
<el-table-column
label="操作"
width="90"
align="center"
>
<template slot-scope="scope">
<div class="call">
调用
</div>
</template>
</el-table-column>
</el-table>
// 表格第一排样式
cellStayle({ row, columnIndex }) {
if (columnIndex === 0) {
return 'font-size: 1.125rem;font-family: DIN Alternate;font-weight: bold;color: #1FB55E;'
}
},