嵌套表行中的不同行数据

Question

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

这就是我正在使用的

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

代码来自官方文档

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

Answer 1

在 expandrow 函数中，您可以传递一个行参数。根据行，您可以呈现自己的表格。

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

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

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
  {
    title: "Action",
    dataIndex: "",
    key: "x",
    render: () => <a href="javascript:;">Delete</a>
  }
];

const data = [
  {
    key: 1,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

const data1 = [
  {
    key: 1,
    name: "I am diff",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    name: "yes",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    name: "no",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

const data2 = [
  {
    key: 1,
    name: "hello",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    name: "hi",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    name: "test",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

const expandedRow = row => {
  console.log(row);
  let inTable = row.key == 1 ? data1 : row.key == 2 ? data2 : data;
  return <Table columns={columns} dataSource={inTable} pagination={false} />;
};

ReactDOM.render(
  <Table columns={columns} expandedRowRender={expandedRow} dataSource={data} />,
  document.getElementById("container")
);