关于 a-table 动态表头需求遇到的问题

直接上代码吧

<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <a-spin size="large" :spinning="loading" tip="加载中...">
          <a-card :bordered="false" class="content">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <a-row :gutter="14">
                  <a-col :md="4" :sm="24">
                    <a-form-item label="选择年份：">
                      <a-select placeholder="请选择" v-model="queryParams.areaType">
                        <a-select-option v-for="dict in areaTypeList" :key="dict.value" :value="dict.value">
                          {{ dict.label }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :md="3" :sm="24">
                    <span class="table-page-search-submitButtons">
                      <a-button @click="currentPageChange(1)" type="primary">查询</a-button>
                      <!-- <a-button @click="reportFun" style="margin-left: 8px">导出</a-button> -->
                    </span>
                  </a-col>
                </a-row>
              </a-form>
            </div>
            <div class="table-page-operator-wrapper">
              <!-- 表格 -->
              <a-table
                class="table-thead-border"
                ref="table"
                :loading="tableLoading"
                :data-source="ListShip"
                :rowKey="
                  (record, index) => {
                    return index
                  }
                "
                :scroll="{ x: 1200 }"
                :pagination="false"
              >
                <a-table-column
                  :width="80"
                  :ellipsis="true"
                  align="center"
                  title="序号"
                  :customRender="(text, record, index) => `${index + 1}`"
                ></a-table-column>

                <a-table-column
                  dataIndex="ygmc"
                  :width="160"
                  :ellipsis="true"
                  align="center"
                  title="渔港名称"
                ></a-table-column>

                <a-table-column
                  dataIndex="city"
                  :width="100"
                  :ellipsis="true"
                  align="center"
                  title="所属市"
                ></a-table-column>

                <a-table-column
                  dataIndex="county"
                  :width="100"
                  :ellipsis="true"
                  align="center"
                  title="所属县"
                ></a-table-column>

                <template v-for="(item, index) in fieldList">
                  <a-table-column-group :key="item.eventName" :title="item.eventName" align="center">
                    <template v-for="(item1, index1) in item.groupList">
                      <a-table-column align="center" :title="item1.name.split(',')[0]" :width="140" :key="item1.name">
                        <template slot-scope="text, record">
                          <div>
                            {{ record.eventList[index].groupList[index1].value }}
                          </div>
                        </template>
                      </a-table-column>
                    </template>
                  </a-table-column-group>
                </template>
              </a-table>
              <a-pagination
                style="margin-top: 15px"
                class="ant-table-pagination"
                v-model="current"
                :page-size-options="pageSizeOptions"
                :total="total"
                show-size-changer
                :page-size="pageSize"
                @showSizeChange="onShowSizeChange"
                @change="currentPageChange"
                :show-total="(total) => `共  ${total}  条数据`"
              >
                <template slot="buildOptionText" slot-scope="props">
                  <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                  <span v-if="props.value === '50'">全部</span>
                </template>
              </a-pagination>
            </div>
          </a-card>
        </a-spin>
      </div>
    </template>
  </page-header-wrapper>
</template>

<script>
import { currentTime } from '../fishingPort/components/fun'
import { getrealtimeStatisPort } from '@/api/fishingPort/statis'
import { getBerthShip, getTyphoonEvent } from '@/api/fishingPort/berth'

export default {
  components: {},
  data() {
    return {
      loading: false,
      portName: null,
      queryParams: {
        fullName: [],
        portName: [],
        areaType: 0,
        date: [],
      },
      areaTypeList: [
        { label: '全部', value: 0 },
        { label: '2023', value: 1 },
        { label: '2022', value: 2 },
      ],
      current: 1,
      total: 100,
      pageSize: 10,
      pageSizeOptions: ['5', '10', '20', '30', '50', '100'],
      columns: [
        // 将columns对象动态生成
      ],
      ListShip: [],
      fieldList: [
        {
          eventName: '事件1',
          groupList: [
            {
              name: '总数',
            },
            {
              name: '本县',
            },
            {
              name: '本市外县',
            },
            {
              name: '同省外市',
            },
            {
              name: '省外',
            },
          ],
        },

        {
          eventName: '事件2',
          groupList: [
            {
              name: '总数1',
            },
            {
              name: '本县1',
            },
            {
              name: '本市外县1',
            },
            {
              name: '同省外市1',
            },
            {
              name: '省外1',
            },
          ],
        },
      ],
      tableLoading: false,
      subsidiesList: [],
      reportList: [
        { slots: 'outReportNum', type: 'OUT', report: 'REPORTED' },
        { slots: 'outNotReportNum', type: 'OUT', report: 'NOT_REPORTED' },
        { slots: 'outFreeReportNum', type: 'OUT', report: 'FREE_REPORT' },
        { slots: 'inReportNum', type: 'IN', report: 'REPORTED' },
        { slots: 'inNotReportNum', type: 'IN', report: 'NOT_REPORTED' },
        { slots: 'inFreeReportNum', type: 'IN', report: 'FREE_REPORT' },
      ],
    }
  },
  created() {
    this.queryParams.date = [currentTime()[1] + ' ' + '00:00:00', currentTime()[0]]
    this.getPortStatisList()

    getTyphoonEvent({
      eventId: 217,
      harbourId: '1673632600765759488',
      pageSize: this.pageSize,
      pageNum: this.pageNum,
      type: 1,
    }).then((res) => {
      console.log(res)
    })
  },
  methods: {
    /**
     * @author Jinlihua
     * @function 获取统计数据
     */
    getPortStatisList() {
      this.tableLoading = true
      getBerthShip({ harbourFullName: '', pageSize: this.pageSize, pageNum: this.current }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.total = res.total
          this.tableLoading = false
          let arr = [
            {
              title: '序号',
              width: 50,
              align: 'center',
              dataIndex: 'xh',
              scopedSlots: { customRender: 'xh' },
            },
            {
              title: '渔港名称',
              dataIndex: 'ygmc',
              align: 'center',
            },
            {
              title: '所属市',
              width: 100,
              dataIndex: 'city',
              align: 'center',
            },
            {
              title: '所属区县',
              width: 100,
              dataIndex: 'county',
              align: 'center',
            },
          ]
          res.rows[0].eventList.map((item, index) => {
            arr.push({
              title: `${item.eventName}`,
              scopedSlots: { customRender: this.getId() },
              children: [
                {
                  title: '总数',
                  dataIndex: 'shipTotal',
                  key: this.getId(),
                  align: 'center',
                  scopedSlots: { customRender: 'shipTotal' },
                },
                {
                  title: '本县',
                  dataIndex: 'selfCounty',
                  key: this.getId(),
                  align: 'center',
                  scopedSlots: { customRender: 'selfCounty' },
                },
                {
                  title: '本市外县',
                  dataIndex: 'outCounty',
                  key: this.getId(),
                  align: 'center',
                  scopedSlots: { customRender: 'outCounty' },
                },
                {
                  title: '同省外市',
                  dataIndex: 'selfProvinceOutCity',
                  key: this.getId(),
                  align: 'center',
                  scopedSlots: { customRender: 'selfProvinceOutCity' },
                },
                {
                  title: '省外',
                  dataIndex: 'outProvince',
                  key: this.getId(),
                  align: 'center',
                  scopedSlots: { customRender: 'outProvince' },
                },
              ],
            })
          })
          console.log(res.rows[0].eventList)
          this.columns = arr
          // const processedData = res.rows.flatMap((row) =>
          //   row.eventList.map((event) => ({
          //     ...row,
          //     ...event,
          //   }))
          // )
          // this.ListShip = processedData
          const dataSource = res.rows.map((row) => {
            return {
              harbourId: row.harbourId,
              ygmc: row.ygmc,
              province: row.province,
              city: row.city,
              county: row.county,
              eventList: row.eventList.map((event) => {
                const groupList = [
                  {
                    name: `总数,${this.getId()}`,
                    value: event.shipTotal.toString(),
                  },
                  {
                    name: `本县,${this.getId()}`,
                    value: event.selfCounty.toString(),
                  },
                  {
                    name: `本市外县,${this.getId()}`,
                    value: event.outCounty.toString(),
                  },
                  {
                    name: `同省外市,${this.getId()}`,
                    value: event.selfProvinceOutCity.toString(),
                  },
                  {
                    name: `省外,${this.getId()}`,
                    value: event.outProvince.toString(),
                  },
                ]

                return {
                  eventName: event.eventName,
                  groupList: groupList,
                }
              }),
            }
          })
          console.log(dataSource)
          this.ListShip = dataSource
          this.fieldList = dataSource[0].eventList
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 获取随机数
    getId() {
      //获取随机数id
      let date = Date.now()
      let rund = Math.ceil(Math.random() * 1000)
      let id = date + '' + rund
      return id
    },
    // 导出
    reportFun() {
      console.log(111)
    },
    onShowSizeChange(current, size) {
      this.current = 1
      this.pageSize = size
      this.getPortStatisList()
    },
    currentPageChange(pageNum) {
      this.current = pageNum
      this.getPortStatisList()
    },
  },
}
</script>
<style lang="less" scoped>
@import '../fishingPort/funStyle.less';
/deep/.ant-table-thead tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
/deep/.ant-table-tbody tr td {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
/deep/.ant-table-thead tr th:first-child {
  border-left: 1px solid #000;
}
/deep/.ant-table-tbody tr td:first-child {
  border-left: 1px solid #000;
}
/deep/.ant-table-thead tr th:last-child {
  border-right: 1px solid #000;
}

/deep/.ant-table-tbody tr td:last-child {
  border-right: 1px solid #000;
}
/deep/.ant-table-tbody tr:last-child td {
  border-bottom: 1px solid #000;
}

/deep/.ant-table-column-title {
  font-size: 16px;
  font-weight: 700;
}

/deep/ thead th {
  background-color: #f3f9ff;
}

/deep/ .tab-button {
  color: #1492ff !important;
  cursor: pointer;
}

.typeStyle {
  margin: 5px 5px 0 10px;
  font-size: 15px;
  font-weight: 700;
}
</style>