el-table 多级表头下对应列的固定

一、问题描述

el-table 中正常的固定列操作是在 el-table-column 中添加属性 fixed="left/right"。但是当 table 中含有多级表头的时候（即 el-table-column 的嵌套），在一级表头中这个属性时只会固定 【表头下的首列】，如下图：

尝试的解决方法是：

1、在一级表头的 el-table-column 中加 fixed 属性，但是出现上述情况【只固定首列】

2、在一级表头下的 el-table-column 中为每列都加上 fixed 属性（或者一级、一级下的 el-table-column都加上），会出现【表格数据缺失】或者【一级表头内容缺失】

。。。然后因为我搜索关键词的能力不堪，，，搜到了合并列，，，绕了一大圈，，，其实不难。

---

二、解决办法

• 确保多级表头的实现是用 el-table-column 嵌套实现的
• 为 一级表头下需要固定的 el-table-column 添加宽度，即 width 属性（为下一步设置一级表头 width 的值做准备，因为默认值是 auto）
• 为一级表头的 el-table-column 添加 fixed 属性，然后添加 width 的宽度，其中 width 的宽度为 固定列 width 宽度的 总和

【说明】：一级表头的 width 决定了 fixed 区域的宽度，尽量是恰好的，不然样式上可能不是你想要的效果，大家可以多尝试

效果图：

代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="一级表头1"
      width="400"
       fixed>
      <el-table-column
        prop="month"
        label="列1-1"
        width="100">
      </el-table-column>
      <el-table-column
        label="列1-2"
        width="100">
      </el-table-column>
      <el-table-column
        label="列1-3"
        width="100">
      </el-table-column>
      <el-table-column
        label="列1-4"
        width="100"
        >
      </el-table-column>
    </el-table-column>
    <!-- 其他列 -->
    <el-table-column
        prop="month"
        label="列2"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列3"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列4"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列5"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列6"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列7"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列8"
        width="180">
      </el-table-column>
      <el-table-column
        prop="month"
        label="列9"
        width="180">
      </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据...
      ]
    };
  }
};
</script>

---

大概就是这个样子，好记性不如烂笔头（加之本人记忆力就是一坨屎。。。），如有错误，欢迎并感谢每一程序员大佬的指正~