基于Vue实现具有固定表头、合并单元格的Html表格

前言

本文主要是通过设置`rowspan`和`colspan`属性来实现合并单元格，通过CSS的`position: sticky`属性来实现固定表头。

一、示例代码

（1）/src/views/Example/HtmlTable/index.vue

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th
            colspan="2"
            style="width: auto; height: 30px;"
          >
          </th>
          <th
            style="width: auto; height: 30px; background-color: #0bc9d4; color: #fff; font-size: 14px;"
            v-for="(item, index) in teamList"
            :key="index"
          >{{ item.val }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(map, index) in finalList" :key="index">
          <tr>
            <td style="width: auto; height: 200px; background-color: #4bbae9; writing-mode: vertical-rl; letter-spacing: 1px; color: #fff;" :rowspan="quotaList.length" v-if="map.isFirstTD">{{ map.label }}</td>
            <td style="width: auto; background-color: #0bc9d4; color: #fff; font-weight: bold;">{{ map.quota }}</td>
            <td>{{ map.AAA }}</td>
            <td>{{ map.BBB }}</td>
            <td>{{ map.CCC }}</td>
            <td>{{ map.DDD }}</td>
            <td>{{ map.total }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data: () => ({
    // 初始化表格列表
    tableList: {
      '阶段一': {
        AAA: { xxx: 9, yyy: 3, zzz: 2 },
        BBB: { xxx: 4, yyy: 3, zzz: 2 },
        CCC: { xxx: 7, yyy: 3, zzz: 2 },
        DDD: { xxx: 9, yyy: 3, zzz: 2 },
        total: { xxx: 9, yyy: 3, zzz: 2 },
      },
      '阶段二': {
        AAA: { xxx: 9, yyy: 3, zzz: 2 },
        BBB: { xxx: 5, yyy: 3, zzz: 6 },
        CCC: { xxx: 5, yyy: 5, zzz: 2 },
        DDD: { xxx: 5, yyy: 3, zzz: 5 },
        total: { xxx: 9, yyy: 3, zzz: 2 },
      },
      '阶段三': {
        AAA: { xxx: 4, yyy: 3, zzz: 2 },
        BBB: { xxx: 9, yyy: 3, zzz: 2 },
        CCC: { xxx: 4, yyy: 3, zzz: 2 },
        DDD: { xxx: 4, yyy: 3, zzz: 2 },
        total: { xxx: 4, yyy: 3, zzz: 2 },
      },
      '阶段四': {
        AAA: { xxx: 1, yyy: 3, zzz: 2 },
        BBB: { xxx: 3, yyy: 3, zzz: 2 },
        CCC: { xxx: 1, yyy: 3, zzz: 2 },
        DDD: { xxx: 2, yyy: 3, zzz: 2 },
        total: { xxx: 3, yyy: 3, zzz: 2 },
      },
      '阶段五': {
        AAA: { xxx: 8, yyy: 3, zzz: 2 },
        BBB: { xxx: 9, yyy: 3, zzz: 2 },
        CCC: { xxx: 8, yyy: 3, zzz: 2 },
        DDD: { xxx: 8, yyy: 3, zzz: 2 },
        total: { xxx: 8, yyy: 3, zzz: 2 },
      },
      '阶段六': {
        AAA: { xxx: 6, yyy: 3, zzz: 2 },
        BBB: { xxx: 6, yyy: 3, zzz: 2 },
        CCC: { xxx: 6, yyy: 3, zzz: 2 },
        DDD: { xxx: 9, yyy: 3, zzz: 2 },
        total: { xxx: 9, yyy: 3, zzz: 2 },
      },
    },
    // 团队列表
    teamList: [
      { key: 'AAA', val: 'A团队' },
      { key: 'BBB', val: 'B团队' },
      { key: 'CCC', val: 'C团队' },
      { key: 'DDD', val: 'D团队' },
      { key: 'total', val: '汇总' },
    ],
    // 指标列表
    quotaList: [
      { key: 'X指标', val: 'xxx' },
      { key: 'Y指标', val: 'yyy' },
      { key: 'Z指标', val: 'zzz' },
    ],
    // 加工后表格列表
    finalList: [],
  }),
  methods: {
    fn() {
      const list = []
      const targetList = this.tableList
      for (let stageName in targetList) {
        const itemMap = targetList[stageName]

        for (let i = 0; i < this.quotaList.length; i++) {
          const quotaVo = this.quotaList[i]

          const row = {}
          row.quota = quotaVo.key
          for (let teamVo of this.teamList) {
            const teamKey = teamVo.key
            row[teamKey] = itemMap[teamKey][quotaVo.val]
          }

          if (i === 0) {
            row.isFirstTD = true
            row.label = stageName
          } else {
            row.isFirstTD = false
          }
          list.push(row)
        }
      }
      this.finalList = list
      console.log(this.finalList)
    }
  },
  mounted() {
    this.fn()
  }
};
</script>

<style lang="less" scoped>
.table-container {
  position: relative;
  width: 100%;
  height: 500px;
  // background-color: aliceblue;
  overflow: auto;

  table {
    position: relative;
    width: 100%;
    min-width: 500px;
    height: auto;
    border-spacing: 0 0; // 设置表格中相邻单元格的边界之间的距离
    border-collapse: separate; // 设置表格中相邻单元格的边框为合并边框模型

    thead {

      tr {

        th {
          position: sticky;
          top: 0;
          border-top: 0;
          border-bottom: 0;
          border-left: 5px solid #fff;
          border-right: 0;
          text-align: center;
        }

        & :last-child {
          border-right: 5px solid #fff;
        }
      }
    }

    tbody {

      tr {

        td {
          border-top: 5px solid #fff;
          border-bottom: 0;
          border-left: 5px solid #fff;
          border-right: 0;
          box-shadow: 0 0 5px 1px #eee inset;
          text-align: center;
        }

        & :last-child {
          border-right: 5px solid #fff;
        }
      }
    }
  }
}
</style>

二、运行效果

具体来说，我们将表头单元格的position属性设置为sticky，并将top属性设置为 0，这样表头就会固定在顶部。同时，我们还将表头单元格的背景色设置为白色，以便与表格内容区分开来。