React Typescript Antd Table (expandedRowRender) 过滤器

Posted 2023-02-18

【中文标题】React Typescript Antd Table (expandedRowRender) 过滤器

【英文标题】：React Typescript Antd Table (expandedRowRender) filter

【发布时间】：2022-01-21 17:51:42

【问题描述】：

我正在尝试将我的语言行过滤到每个无列，但它只是将所有语言数据打印到所有行中：

编辑：

这是列的代码：

const expandedRowRender = (record, index, indent, expanded) => 
            const columns = [
                
                    title: "Sprache",
                    key: "no",
                    render: () => 
                        return (
                            <Space direction="vertical">
                                <Text>record.de</Text>
                                <Text>record.en</Text>
                            </Space>
                        );
                    ,
                ,
            ];
            return (
                <Table
                    columns=columns
                    dataSource=this.state.question
                    rowKey=(record) => record.no
                />
            );
        ;

        const columns = [...]

        return (
            <Table
                className="components-table-demo-nested"
                columns=columns
                expandedRowRender=expandedRowRender
                dataSource=this.state.question
                loading=this.state.isLoading
                rowKey=(record) => record.no
            />
        );
    

现在它打印 4 次相同的语言数据（因为数组有 4 个条目）。但它为什么要这样做呢？它应该只打印 1 次。

这是我的示例数据：

【问题讨论】：

可以的话请把StaticRange.question的示例数据放在这里

@HDM91 我添加了示例数据

您传递给内表的是否是 staticrange.question 数据？您能否添加传递给表的完整数据

@HDM91 很抱歉造成误解，我将状态问题传递到表格中。我不知道为什么 *** 将我的代码转换为“MediaRecorder”和“staticrange”......所以 this.state.question 是我的模型问题的数组，其中包含您可以在上图中找到的数据。每个记录都有一个翻译“de”和“en”，并且使用您的示例代码，表格现在打印正确的翻译但四次，因为传递的数组包含四个项目。

现在你可以根据 record.no 或 index 过滤数组，我不明白你为什么传递两个表相同的数组？

【参考方案1】：

expandedRowRenderer 具有可用于根据父表数据过滤内部表的参数。

    const expandedRowRender = (record, index, indent, expanded) => 
      //you can use record here to filter datasource
      columns = [
        
          title: "Sprache",
          key: "no",
          render: () => 
            return (
              <Space direction="vertical">
                <Text>MediaRecorder.de</Text>
                <Text>MediaRecorder.end</Text>
              </Space>
            );
          ,
        ,
      ];
      return (
        <Table
          columns=columns
          dataSource=this.StaticRange.question.filter(q => q.no === index
          rowKey=(record) => record.no
        />
      );
    ;