ReactAntd(三十) React-表格列头合并

表格列头合并

• children

import React, { useState } from 'react'
import { Table, ConfigProvider } from 'antd' // 引入ConfigProvider全局化配置
import zhCN from 'antd/es/locale/zh_CN'

function useHighTable3() {
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      fixed: 'left',
    },
    {
      title: '其他信息',
      children: [
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          width: 150,
          sorter: (a, b) => a.age - b.age,
        },
        {
          title: '地址',
          children: [
            {
              title: '街道',
              dataIndex: 'street',
              key: 'street',
              width: 150,
            },
            {
              title: '门牌',
              children: [
                {
                  title: '楼层',
                  dataIndex: 'building',
                  key: 'building',
                  width: 100,
                },
                {
                  title: '单元门',
                  dataIndex: 'number',
                  key: 'number',
                  width: 100,
                },
              ],
            },
          ],
        },
      ],
    },
    {
      title: '公司',
      children: [
        {
          title: '公司地址',
          dataIndex: 'companyAddress',
          key: 'companyAddress',
          width: 200,
        },
        {
          title: '公司名字',
          dataIndex: 'companyName',
          key: 'companyName',
        },
      ],
    },
    {
      title: '房子大小',
      dataIndex: 'gender',
      key: 'gender',
      width: 80,
      fixed: 'right',
    },
  ]
  const data = []
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: 'John Brown',
      age: i + 1,
      street: 'Lake Park',
      building: 'C',
      number: 200,
      companyAddress: 'Lake Street 42',
      companyName: 'SoftLake Co',
      gender: 'M',
    })
  }
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  //分页
  const handleClick = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(`当前页是${current}`)
    console.log(`每页条数${pageSize}`)
  }
  return (
    <ConfigProvider locale={zhCN}>
      <Table
        columns={columns}
        dataSource={data}
        bordered
        size="middle"
        pagination={{
          position: [pagnationPage],
          defaultCurrent: 1,
          defaultPageSize: 2,
          total: 50,
          onChange: handleClick,
        }}
      />
    </ConfigProvider>
  )
}

export default useHighTable3