复杂表头表格，部分表头需要合并，并且表格较长时横向有滚动条，固定自定义列不动，方便查看数据

项目中有一个复杂表头的表格，有常规的一一对应表头即一个表头对应一列数据，也有一个表头对应多条数据的合并表头，并且需要将最前面的两列数据固定住，使其不会随着表格的横向滚动而移动，方便用户查看数据，表格如下图：

我的项目是vue3+element-plus+sass，表格使用的element-plus中的表格组件，在此基础上进行二次修改，其他UI库组件也差不多，原理一样，下面是我的实现代码：

一、html部分代码：

       <div class="table-box">
            <el-table
              :data="tableData"
              border
              v-loading="isLoading"
              element-loading-text="数据加载中"
              style="width: 100%"
              :cell-style="{ 'border-color': '#34BF7E', color: '#303331' }"
              :header-cell-style="{
                'border-color': '#34BF7E',
                color: '#34BF7E',
                'background-color': '#e7f8f3',
              }"
              :highlight-current-row="true"
            >
              <!-- 固定列综合体名称和期数 -->
              <el-table-column
                fixed
                :label="tableHeader[0].label"
                prop="pastoralName"
                min-width="150px"
              ></el-table-column>
              <el-table-column
                fixed
                :label="tableHeader[1].label"
                prop="phase"
              ></el-table-column>
              <el-table-column
                v-for="(item, index) in tableHeader.slice(2)"
                :key="index"
                :prop="item.prop"
                :label="item.label"
              >
                <template v-if="item.children">
                  <el-table-column
                    v-for="(child, childIndex) in item.children"
                    :key="childIndex"
                    :prop="child.prop"
                    :label="child.label"
                    :min-width="
                      child.label == '传统媒体促销' ||
                      child.label == '新媒体促销'
                        ? '100px'
                        : ''
                    "
                  ></el-table-column>
                </template>
              </el-table-column>
            </el-table>
          </div>

二、样式（sass）部分代码：

.table-box {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  ::v-deep(.el-table) {
    border: $theme-color 1px solid;
    border-radius: 16px 16px 0px 0px;
    .cell {
      padding: 0 5px;
      text-align: center;
    }
    .el-table__cell {
      padding: 7px 0px;
    }
    .el-table__row {
      &:last-child {
        .el-table__cell {
          border-bottom: none !important;
        }
      }
    }
  }
  ::v-deep(.el-scrollbar__view) {
    vertical-align: unset !important;
  }
  /**修改横向滚动条滑块的高度*/
  ::v-deep(.el-scrollbar__bar) {
    height: 9px;
  }

  /**修改滚动条滑块的背景色为主题色*/
  ::v-deep(.el-scrollbar__thumb) {
    background-color: #34bf7e !important;
    opacity: 1;
  }
}

三、js部分代码：

//表头数据
const tableHeader = ref([
  {
    prop: "pastoralName",
    label: "综合体名称",
  },
  {
    prop: "phase",
    label: "期数",
  },
  {
    label: "玉米",
    children: [
      {
        prop: "cornPrice",
        label: "价格",
      },
      {
        prop: "cornOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "水稻",
    children: [
      {
        prop: "ricePrice",
        label: "价格",
      },
      {
        prop: "riceOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "小麦",
    children: [
      {
        prop: "wheatPrice",
        label: "价格",
      },
      {
        prop: "wheatOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "西红柿",
    children: [
      {
        prop: "tomatoPrice",
        label: "价格",
      },
      {
        prop: "tomatoOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "辣椒",
    children: [
      {
        prop: "pepperPrice",
        label: "价格",
      },
      {
        prop: "pepperOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "肉羊",
    children: [
      {
        prop: "sheepPrice",
        label: "价格",
      },
      {
        prop: "sheepOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "肉牛",
    children: [
      {
        prop: "cowPrice",
        label: "价格",
      },
      {
        prop: "cowOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "门票",
    children: [
      {
        prop: "oldMedia",
        label: "传统媒体促销",
      },
      {
        prop: "oldMediaPrice",
        label: "价格",
      },
      {
        prop: "oldMediaOrderNums",
        label: "订单量",
      },
      {
        prop: "newMedia",
        label: "新媒体促销",
      },
      {
        prop: "newMediaPrice",
        label: "价格",
      },
      {
        prop: "newMediaOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "特色餐饮",
    children: [
      {
        prop: "mealsPrice",
        label: "价格",
      },
      {
        prop: "mealsOrderNums",
        label: "订单量",
      },
    ],
  },
  {
    label: "住宿",
    children: [
      {
        prop: "standardPrice",
        label: "标间价格",
      },
      {
        prop: "standardOrderNums",
        label: "订单量",
      },
      {
        prop: "suitePrice",
        label: "套房价格",
      },
      {
        prop: "suiteOrderNums",
        label: "订单量",
      },
    ],
  },
]);
//表格数据
const tableData = ref([
  {
    pastoralName: "综合体1",
    phase: "1",
    cornPrice: "100",
    cornOrderNums: "100",
    ricePrice: "100",
    riceOrderNums: "100",
    wheatPrice: "100",
    wheatOrderNums: "100",
    tomatoPrice: "100",
    tomatoOrderNums: "100",
    pepperPrice: "100",
    pepperOrderNums: "100",
    sheepPrice: "100",
    sheepOrderNums: "100",
    cowPrice: "100",
    cowOrderNums: "100",
    oldMedia: "10000",
    oldMediaPrice: "100",
    oldMediaOrderNums: "100",
    newMedia: "20000",
    newMediaPrice: "100",
    newMediaOrderNums: "100",
    mealsPrice: "100",
    mealsOrderNums: "100",
    standardPrice: "100",
    standardOrderNums: "100",
    suitePrice: "100",
    suiteOrderNums: "100",
  },
]);

表头部分是重点，表头的prop数据和表格数据中的名字需要一一对应，然后在表格中动态渲染，并且结合element-plus的表格组件中固定列fixed属性将最前面的两列数据固定住，而不会随着横向滚动条左右滚动而移动，方便查看数据。