element el-table 表格横纵双表头，横纵表头交换，表头样式优化，表头背景色样式设置，列样式设置

双表头这里提供一种思路，可以借鉴一下，表头样式设置header-row-class-name，列样式设置class-name

效果图：

代码：

​
    <div id="app">
        <el-table :data="list" border style="width: 100%" header-row-class-name="headerTable">
            <el-table-column class-name="cellTable" prop="name" label="近三年指标数据" align="center" width="200"></el-table-column>
            <el-table-column :prop="'type'+(i+1)" :label="item+'年'" align="center" v-for="item,i in year" :key="i"></el-table-column>
        </el-table>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    // 初始格式
                    list: [
                        { name: "年营业收入（万元）", type1: "", type2: "", type3: ""},
                        { name: "年利润（万元）", type1: "", type2: "", type3: ""},
                        { name: "科研投入（万元）", type1: "", type2: "", type3: ""},
                        { name: "知识产权投入（万元）", type1: "", type2: "",type3: ""}
                    ],
                    // 存放年份
                    year: [],

                    // 模拟数据
                    infoList:[
                        // 年份，年营业收入（万元），年利润（万元），科研投入（万元），知识产权投入（万元）
                        {year:2021,nys:10042,nlr:12342,kytr:222422,zscq:41222},
                        {year:2022,nys:32412,nlr:33224,kytr:314412,zscq:32223},
                        {year:2023,nys:12423,nlr:11234,kytr:123123,zscq:43232},
                    ]
                }
            },
            mounted() {
                this.getList()
            },
            methods: {
                // 模拟接口获取数据
                getList(){
                    setTimeout(()=>{
                        // 数据存到this.infoList后，处理数据格式
                        this.initData()
                    },100)
                },
                // 处理数据格式
                initData() {
                    this.year = [];
                    this.infoList?.forEach((e, i) => {
                        // 保存日期
                        this.year.push(e.year);
                        // 保存日期对应的每列数据
                        this.list[0]["type" + (i + 1)] = e.nys;
                        this.list[1]["type" + (i + 1)] = e.nlr;
                        this.list[2]["type" + (i + 1)] = e.kytr;
                        this.list[3]["type" + (i + 1)] = e.zscq;
                    });
                },
            }
        })
    </script>
    <style>
         /* 表头样式 */
        .headerTable th.el-table__cell {
            background-color: #fafafa;
        }
        /* 第一列的样式修改 */
        .cellTable {
            background-color: #fafafa;
            color: #909399;
            font-weight: 600;
        }
    </style>

​