element table 表头拆分两列

element table 表头拆分两列

<template>
    <el-table :data="tableData" border style="width: 100%" :header-row-style="{ background: '#f5f7fa' }">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <!-- 添加自定义类名以调整样式 -->
        <el-table-column label="成绩" class-name="custom-header">
            <el-table-column prop="math" label="数学"></el-table-column>
            <el-table-column prop="english" label="英语"></el-table-column>
        </el-table-column>
    </el-table>
</template>


<script>
export default {
    data() {
        return {
            tableData: [
                { date: '2023-04-01', name: '张三', address: '北京市', math: 90, english: 85 },
                { date: '2023-04', name: '李四', address: '上海市', math: 92, english: 88 },
                { date: '2023-04-02', name: '王五', address: '广州市', math: 88, english: 90 },
                { date: '2023-04', name: '赵六', address: '深圳市', math: 90, english: 92 },
            ],
        };
    },
    methods: {

    },
};
</script>
<style scoped>
.custom-header .el-table__header-cell {
    /* 自定义样式，例如增加背景色、字体大小等 */
    background-color: paleturquoise;
    /* 替换为您想要的颜色 */
    font-weight: bold;
}

.custom-header .cell {
    text-align: center;
}
</style>