ant.design组件Table嵌套子表格

数据格式

import React, { Component } from 'react'
import { Table } from 'antd';
const dataSource = [{
    busi_name: "指标用户1103  ",
    prov_name: "西藏",
    task_id: 7911,
    item: [{
        busi_name: "指标用户1103  ",
        log_id: 8955,
        prov_name: "西藏",
    }, {
        busi_name: "指标用户1103  ",
        log_id: 8826,
        prov_name: "西藏",
    }]
}, {
    busi_name: "安",
    prov_name: "北京",
    task_id: 8189,
    item: [{
        busi_name: "安",
        log_id: 9109,
        prov_name: "北京",
    }]
}];

const columns = [
    { title: '省份名称', dataIndex: 'prov_name', key: 'prov_name', align: "center", width: 100, ellipsis: true }, // "北京"
    { title: '业务名称', dataIndex: 'busi_name', key: 'busi_name', align: "center", width: 100, ellipsis: true }, // "测试——陆雪琪 新建指标zx "
    { title: '业务类型', dataIndex: 'proc_name', key: 'proc_name', align: "center", width: 100, ellipsis: true }, // "批量指标(月)"
];

export class index extends Component {
    render() {

        const expandedRowRender = (record) => {
            const columns = [
                { title: 'prov', dataIndex: 'prov_name', key: 'prov_name', align: "center", width: 100, ellipsis: true },
                { title: 'Date', dataIndex: 'busi_name', key: 'busi_name', align: "center", width: 100, ellipsis: true },
                { title: 'Name', dataIndex: 'proc_name', key: 'proc_name', align: "center", width: 100, ellipsis: true },
            ];
            return <Table columns={columns} dataSource={record.item} pagination={false} />;
        };

        return (
            <div>
                <Table
                    columns={columns}
                    dataSource={dataSource}
                    rowKey={record => record.task_id}
                    expandedRowRender={record => expandedRowRender(record)}
                />
            </div>
        )
    }
}

export default index