Question

我正在为我的项目使用Ant Design。我有一个场景，在这里我应该使用Ant Design嵌套表，在每一行中打开新的嵌套表以显示数据。我无法为每一行显示不同的数据。它在所有嵌套行中显示相同的数据

这就是我正在使用的

https://ant.design/components/table/#components-table-demo-nested-table

代码是官方文档中的

期望在不同的嵌套行项目中显示不同的数据

Answer 1

在expandedrow函数内部，您可以传递行参数。根据该行，您可以呈现自己的表。

https://codesandbox.io/s/34w7km6o11

在上面的示例中，您可以检查我如何基于该特定行呈现不同的数据。我使用了三元运算符，您可以编写自己的条件

Answer 2

使用状态制作儿童数据
然后将其传递给expan函数
用自由文本写入参数
然后在嵌套表的数据源中写入数据[expan.key].children2。

data[expan.key].children2 只是您可以与其他人更改的自由文本。谢谢

Answer 3

我对这个问题有不同的解决方法，我一直在其他帖子中寻找，但没有找到这个解决方案，希望对您有所帮助：

import React from "react";
import "antd/dist/antd.css";
import { Table } from "antd";
import { fakeFirstLevelData } from 
'../fakeDataBase/fakeFirstLevelData'


const firstLevelColumns = [
        {
            title: 'ID',
            dataIndex: 'id_tx',
            key: 'ID_TX'
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            key: 'amount'
        },
        {
            title: 'Currency',
            dataIndex: 'currency',
            key: 'currency'
        },
]
const secondLevelColumns = [
        {
            title: 'First name from',
            dataIndex: 'firstname_from',
            key: ''
        },
        {
            title: 'first name to',
            dataIndex: 'firstname_to',
            key: ''
        },
        {
            title: 'Date ',
            dataIndex: 'date',
            key: ''
        },
]
const firstExpandedRow = (record, index, indent, expanded) => {
        let data = []
        data.push(record.secondLevel)
        return (
            <Table
                rowKey={record => record.cardholderid}
                columns={secondLevelColumns}
                dataSource={data}
                // expandable={{ expandedRowRender: secondExpandedRow }}
                pagination={false}
            />
        )
    }




 return (
            <div className='container mt-40 mb-40 overflow-x-auto  
tableContainer'>
                <Table
                    dataSource={fakeFirstLevelData}
                    columns={firstLevelColumns}
                    rowKey={record => record.id_tx}
                    loading={fakeFirstLevelData ? false : true}
                    pagination={false}
                    expandable={{
                        expandedRowRender: firstExpandedRow,
                        defaultExpandAllRows: false
                    }}
                />
            </div>
        )

这是我的假数据，类似于调用 API：

export const fakeFirstLevelData = [
    {
        id: '1199343457',
        amount: '127,45',
        currency: 'EUR',            
        secondLevel: {
            firstnameFrom: 'Antonio',
            firstnameTo: 'Juan',
            date: '2024/12/12'
            
        }
    },
    {
        id: '11993453458',
        amount: '1',
        currency: 'EUR',            
        secondLevel: {
            firstnameFrom: 'Carlos',
            firstnameTo: 'Estefanía',
            date: '2024/12/12'
            
        }
    }
]

这样我就有了一个包含不同级别信息的 json，在每一行中我可以显示 N 个字段，通过展开行我可以显示同一行的更多信息。

嵌套表行中的不同行数据

3 个答案: