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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值