Table嵌套子Table，或者定义内容

Table嵌套子Table,或者其他自定义内容

    import styles from './index.less';
    import { Button, Select, Tooltip, Table, Checkbox } from 'antd';
    import React, { useEffect, useState } from 'react';
    import { useSelector, useDispatch } from 'umi';

    export default function ResultTable() {

      const [checkValue, setChheckValue] = useState(false);
      const [selectRow, setSelectRow] = useState([]);
        
      const pointData = [
      {
        key: '1',
        id: '456236',
        name: '阵地A',
        area: [69, 40, 78, 46],
        height: '14m',
        pointDistance: 11,
        massDistance: 11
      },
      {
        key: '2',
        id: '456336',
        name: '阵地B',
        area: [92, 29, 96, 32],
        height: '14m',
        pointDistance: 12,
        massDistance: 12
      },
      {
        key: '3',
        id: '4545236',
        name: '阵地C',
        area: [94, 32, 99, 36],
        height: '14m',
        pointDistance: 13,
        massDistance: 13
      },
    ];
      const outColumns = [
        {
          title: '序号',
          dataIndex: 'order',
          key: 'order',
        },
        {
          title: '阵地组合',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '优化目标值',
          dataIndex: 'target',
          key: 'target',
          sorter: (a, b) => a.target - b.target,
          render: (text, record) => {
            return record.target + 'km';
          },
        },
      ];
      const outData = [
        {
          key: 1,
          name: '三个阵地',
          order: 1,
          target: 5,
          content: pointData,
        },
        {
          key: 2,
          name: '三个阵地',
          order: 2,
          target: 6,
          content: pointData,
        },
        {
          key: 3,
          name: '三个阵地',
          order: 3,
          target: 7,
          content: pointData,
        },
        {
          key: 4,
          name: '三个阵地',
          order: 4,
          target: 8,
          content: pointData,
        },
      ];
      const columns = [
        {
          title: '阵地名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '阵地中心',
          dataIndex: 'area',
          key: 'area',
          render: (text, record) => {
            return record.area.join('，');
          },
        },
        {
          title: '离目标点距离',
          dataIndex: 'pointDistance',
          key: 'pointDistance',
          sorter: (a, b) => a.pointDistance - b.pointDistance,
          render: (text, record) => {
            return record.pointDistance + 'km';
          },
        },
        {
          title: '离集结点距离',
          dataIndex: 'massDistance',
          key: 'massDistance',
          sorter: (a, b) => a.massDistance - b.massDistance,
          render: (text, record) => {
            return record.massDistance + 'km';
          },
        },
      ];
      const rowSelection = {

        onSelect: (record, selected, selectedRows) => {
          setSelectRow(selectedRows);
        },
      };
      return (
        <div className={styles.home}>
          <div className={styles.tableBox}>
            <Table
              columns={outColumns}
              bordered
              rowSelection={{ ...rowSelection }}
              expandable={{
                expandedRowRender: (record) => (
                  <Table
                    dataSource={record.content}
                    columns={columns}
                    pagination={false}
                    bordered
                  ></Table>
                ),
              }}
              dataSource={outData}
            />
          </div>
        </div>
      );
    }

通过expandable属性下的expandedRowRender属性可以自定义渲染，其数据源就是嵌套的子数据