左侧表头单元格

效果图:

左侧是表格项,顶部是年份

这种适合在手机等小屏展示表格数据

后段返回的数据格式

0: {key: 2010, year: 2010, aAmount: 946, bAmount: 681, cAmount: 469, …}

1: {key: 2011, year: 2011, aAmount: 543, bAmount: 869, cAmount: 80, …}

2: {key: 2012, year: 2012, aAmount: 442, bAmount: 385, cAmount: 412, …}

3: {key: 2013, year: 2013, aAmount: 847, bAmount: 703, cAmount: 539, …}

....

需要处理一下,将纵向年份的表格数据,改成横向的数据

处理后格式:

0: {title: "销售额 1", key: "aAmount", year0: 946, year1: 543, year2: 442, …}

1: {title: "销售额 2", key: "bAmount", year0: 681, year1: 869, year2: 385, …}

2: {title: "销售额 3", key: "cAmount", year0: 469, year1: 80, year2: 412, …}

3: {title: "销售额 4", key: "dAmount", year0: 13, year1: 86, year2: 408, …}

4: {title: "销售额 5", key: "eAmount", year0: 443, year1: 941, year2: 970, …}

还需要处理一下左侧第一列单元格的样式

完整代码

<template>

  <div>
    <h3>左侧表头表格</h3>
    <a-table
      class="container"
      :columns="columns"
      :data-source="fixedData"
      :scroll="{ x: 1200 }"
      bordered
    >
      <template #headerCell="{ record, index, column }">
        <template v-if="column.dataIndex === 'title'">
          <div class="title">
            <div class="left">销售额</div>
            <div class="line"></div>
            <div class="right">年份</div>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const fixedData = ref([]);
    for (let i = 2010; i < 2023; i += 1) {
      fixedData.value.push({
        key: i,
        year: i,
        aAmount: Math.floor(Math.random() * 1000),
        bAmount: Math.floor(Math.random() * 1000),
        cAmount: Math.floor(Math.random() * 1000),
        dAmount: Math.floor(Math.random() * 1000),
        eAmount: Math.floor(Math.random() * 1000),
      });
    }
    // 表头样式
    const customHeaderCell = () => {
      return {
        class: "custom-title-row",
      };
    };
    // 单元格样式
    const customCell = (column, index) => {
      //   console.log(column, index);
      return {
        class: "custom-row",
      };
    };
    const columns = ref([
      {
        title: "",
        dataIndex: "title",
        fixed: true,
        customCell: customCell,
        customHeaderCell: customHeaderCell,
      },
    ]);

    const handleData = () => {
      const columnsArr = [];
      const newTable = [
        { title: "销售额1", key: "aAmount" },
        { title: "销售额2", key: "bAmount" },
        { title: "销售额3", key: "cAmount" },
        { title: "销售额4", key: "dAmount" },
        { title: "销售额5", key: "eAmount" },
      ];
      fixedData.value.forEach((item, i) => {
        const obj = {
          title: item.year,
          dataIndex: `year${i}`,
        };
        columnsArr.push(obj);
      });
      newTable.forEach((item) => {
        fixedData.value.forEach((sItem, i) => {
          item[`year${i}`] = sItem[item.key];
        });
      });
      columns.value = columns.value.concat(columnsArr);
      console.log(fixedData.value, newTable);
      fixedData.value = newTable;
    };

    onMounted(() => {
      handleData();
    });
    return {
      fixedData,
      columns,
    };
  },
};
</script>

<style  lang="less">
.ant-table-thead > tr > .custom-title-row {
  padding: 0;
}
.custom-row {
  background-color: rgb(156, 236, 26);
}
tr.ant-table-row:hover > td.custom-row {
  background-color: rgb(156, 236, 26);
}
/* 表头样式 */
.title {
  position: relative;
  height: 55px;
  .left {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }
  .right {
    position: absolute;
    right: 5px;
    top: 5px;
  }
  .line {
    position: absolute;
    height: 1px;
    background: #ddd;
    width: 104px;
    transform: rotate(33deg);
    top: 27px;
    left: -10px;
  }
}
</style>