0

我有一个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>用另一个表替换，但我不知道如何配置孩子的表数据源以便只获取扩展行车辆的预订。

4

1 回答 1

0

您可以将另一个<Table dataSource={record.bookings} />像您建议的那样传递给expandableRowRender带有新列名的。

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

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

希望有帮助

于 2020-02-11T16:45:46.643 回答