前端elementUI表头header,表格body的字体大小背景颜色大小设置

复制代码到编译器直接用查看即可

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';
            }
        },