React.js：可擴展行內的表格

Question

我有一個帶有車輛的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>但我不知道如何配置子表數據源以便只獲取擴展行車輛的預訂。

Answer 1

您可以像您建議的那樣將另一個<Table dataSource={record.bookings} />傳遞給具有新列名的expandableRowRender 。

這是我根據 AntD 文檔中的示例編輯的示例代碼框。

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

希望有幫助