vue3 + Ant Design 实现双表头表格的效果(横向表头+纵向表头)

// 纵向表头数组 tableColumns
const tableColumns = ref([
  {
    label: "日（24小时）数据浓度均值",
    value: "monthMaxDayValue",
  },
  {
    label: "小时数据平均浓度均值",
    value: "monthHourValue",
  },
]);

//定义横向表头列 columns
 const columns = ref([]);
//定义表格数据
 const list = ref([]);
 // 先添加第一列
 columns.value = [
      {
        title: "",
        dataIndex: "timeType",
        width: 190,
       fixed: "left",
     },
  ];
//处理接口返回的数据data，动态拼接表头数组 columns
data.forEach(item => {
     const obj = {
        id: item.enterpriseId,
        parentId: null,
        title: item.enterpriseName,
        align: "center",
        children: [],
      };
      if (item.pointFactors.length) {
          item.pointFactors.forEach(element => {
              list.push({
                name: element.pointName,
                id: element.pointId,
                monthMaxDayValue: element.monthMaxDayValue,
                monthHourValue: element.monthHourValue,
              });
              const childObj = {
                id: element.pointId,
                parentId: item.enterpriseId,
                title: element.pointName,
                width: 130,
                align: "center",
                dataIndex: element.pointId,
                customRender: ({ record }) => {
                  return record[element.pointId]
                    ? record[element.pointId]
                    : "-";
                },
              };
              obj.children.push(childObj);
          });
     }
     columns.value.push(obj);
});

// tableColums  已定义的纵向表头
// tableData   已定义的表格数组
 for (const tab of tableColumns.value) {
     const col: any = Object.create(null);
     list.forEach((item, index) => {
         col.timeType = tab.label;
         col[list[index + 0].id] = item[tab.value];
     });
     tableData.value.push(col);
}

<a-table
     :columns="columns"
     :data-source="tableData"
     :pagination="false"
     row-key="id"
     bordered
 />