React.js：可扩展行内的表格答案

【问题标题】：React.js: table inside expandable rowsReact.js：可扩展行内的表格
【发布时间】：2020-02-11 14:38:36
【问题描述】：

我有一个带有车辆的 antd 可扩展行表。我想在展开的行中显示特定车辆的所有预订。

这是vehicles 表及其数据源：

const vehiclesData = (
        props.vehicles.map(vehicle =>{      
            addMonths(2,vehicle.insuranceStart);

            return {
                "key":vehicle.id,
                "brand":vehicle.brand !=null ? vehicle.brand.brand : '',
                "model":vehicle.model !=null ? vehicle.model.model : '',
                "color":vehicle.color,
                "plate":vehicle.plate,
                "insuranceStart":moment(vehicle.insuranceStart).format('DD/MM/YYYY'),
                "insuranceType":vehicle.insuranceType !=null ? vehicle.insuranceType.company + ' ('+vehicle.insuranceType.duration +' Μήνες'+')' : '',
                "brand_id":vehicle.brand !=null ? vehicle.brand.id : '',
                "model_id":vehicle.model !=null ? vehicle.model.id : '',
                "insurance_id":vehicle.insuranceType !=null ? vehicle.insuranceType.id : '',
                "bookings": vehicle.bookings != null ? vehicle.bookings : ''
            }
        })
    )

<Table 
     expandedRowRender={record => <p style={{ margin: 0 }}>{record.bookings}</p>}
     dataSource={vehiclesData}
     size="small"
     bordered  
     columns = {columns}
     loading={props.vehiclesLoading!=null ? props.vehiclesLoading : false}
/>

这是我迄今为止尝试过的，显然行不通。我在想我可以用另一个表替换<p style={{ margin: 0 }}>{record.bookings}</p>，但我不知道如何配置孩子的表数据源以便只获取扩展行车辆的预订。

【问题讨论】：

标签： javascript reactjs join antd expandable-table

【解决方案1】：

您可以按照您的建议将另一个<Table dataSource={record.bookings} /> 传递给expandableRowRender，并使用新的列名。

这是我根据 AntD 文档中的示例编辑的示例代码框。

https://codesandbox.io/s/compassionate-microservice-4z5gq

希望有帮助

【讨论】：