react antd 表头分组渲染的问题记录

import React, { useEffect } from 'react'
import { observer } from 'mobx-react'
import { get } from 'lodash'


import { Modal } from 'antd'

import SelfTable from '@/view/common/self_table/self-table'

import ST from '../store'

const columns = [
  {
    title: '商品名称',
    dataKey: 'productName',
  },
  {
    title: '产品类别',
    dataKey: 'type',
  },
  {
    title: '型号规格',
    dataKey: 'model',
  },
  {
    title: '品牌',
    dataKey: 'brand',
  },
  {
    title: '第一次报价',
    dataKey:'firstQuoted',
    children: [
      {
        title: '数量',
        dataKey: 'firstQuoted.number',
        render: (text, record) => {
          const unitPrice =get(record, 'firstQuoted.number','--');
          return <span>{unitPrice}</span>;
        },
      },
      {
        title: '目标含税价(元)',
        dataKey: 'firstQuoted.unitPrice',
        render: (text, record) => {
          const unitPrice =get(record, 'firstQuoted.unitPrice','--');
          return <span>{unitPrice}</span>;
        },
      },
      {
        title: '备注',
        dataKey: 'firstQuoted.remark',
        render: (text, record) => {
          const unitPrice =get(record, 'firstQuoted.remark','--');
          return <span>{unitPrice}</span>;
        },
        // render: (text: string) => <span className="ellipsis">{text || '--'}</span>,
      },
    ],
  },
  {
    title: '第二次报价',
    dataKey:'secondQuoted',
    children: [
      {
        title: '数量',
        dataKey: 'secondQuoted.secondQuotedNum',
        render: (text, record) => {
          const unitPrice =get(record, 'secondQuoted.secondQuotedNum','--');
          return <span>{unitPrice}</span>;
        },
      },
      {
        title: '目标含税价(元)',
        dataKey: 'secondQuoted.secondQuotedPrice',
        render: (text, record) => {
          const unitPrice =get(record, 'secondQuoted.secondQuotedPrice','--');
          return <span>{unitPrice}</span>;
        },
      },
      {
        title: '备注',
        dataKey: 'secondQuoted.secondQuotedRemark',
        render: (text, record) => {
          const unitPrice =get(record, 'secondQuoted.secondQuotedRemark','--');
          return <span>{unitPrice}</span>;
        },
        // render: (text: string) => <span className="ellipsis">{text || '--'}</span>,
      },
    ],
  },
]

// 详情弹窗
export default observer((props) => {
  useEffect(() => {
    console.log('加载完成',ST.currentRecord?.id)
    ST.getDetailInfo(ST.currentRecord?.id)
  }, [ST.currentRecord])

  return (
    <Modal
      title="明细信息"
      open={ST.detailShow}
      onOk={() => {
        ST.setDetailShow(false)
      }}
      onCancel={() => {
        ST.setDetailShow(false)
      }}
      width={1000}
    >
      <SelfTable
        rowKey="id"
        columns={columns}
        dataSource={ ST.detailInfo||[]}
        pagination={false}
        loading={ST.detailLoading}
      />
    </Modal>
  )
})

import { Form, DatePicker as TDatePicker, Button, Divider, Select,Space, Cascader, Input } from 'antd'
const DatePicker: any = TDatePicker