如何将嵌套 table 中的问题 ID 与主 table 匹配

Question

const questionsData = [
{
  
      key: '16',
      qn_total_mark: '5',
      part_desc: 'cheese',
},
{
  
      key: '16',
      qn_total_mark: '5',
      part_desc: 'Potato',
},
{
  
      key: '17',
      qn_total_mark: '5',
      part_desc: 'Now',
}
{
  
      key: '17',
      qn_total_mark: '5',
      part_desc: 'Now',
}
    ]

const columns = [
        {
            title: 'Question No',
            dataIndex: 'key',
            key: 'question_no',
        },
        {
            title: 'Total Marks',
            dataIndex: 'qn_total_mark',
            key: 'qn_total_mark',
        },
    ]
const expandedRowRender = () => {
        const columns = [
            {
                title: 'Part Description',
                dataIndex: 'part_desc',
                key: 'key',
            },
        ]
        return (
            <Table
                columns={columns}
                dataSource={questionsData}
            />
        )
    }

return (
        <>
            <Table
                columns={columns}
                dataSource={questionsData}
                expandable={{ expandedRowRender }}
            />
        </>
    )

我想做的是创建一个嵌套的 table 来存储 part_desc 对应的问题没有（a.k.a 键），但是我的嵌套 table现在无论问题编号如何都返回所有部分描述，有没有办法将问题编号和部分描述匹配在一起[=13=]

Answer 1

expandedRowRender 接受额外的参数，其中一个参数是 record，它保存您正在展开的行的数据。

const expandedRowRender = (record) => {
            const columns = [
                {
                    title: 'Part Description',
                    dataIndex: 'part_desc',
                    key: 'key',
                },
            ]

// filter the data based that matches the record.key
const filteredData = questionsData.filter(data => data.key === record.key);
    
return (
         <Table
            columns={columns}
            dataSource={filteredData}
         />
       )
}

如何将嵌套 table 中的问题 ID 与主 table 匹配

How to match the question id in the nested table to the main table

javascript

frontend

reactjs

antd