具有动态子列的 Ant 设计表

Question

我正在使用 ant 的表并尝试设置动态列。

我需要的是一个表格，其中显示用户列表以及每个类别的表现，如下例所示。

详细信息：我有一个分组列Performance，可以有不同的子列（当前示例显示列science和physics）。我正在调用 renderContent() ，它设置一个具有 property 的对象children。我从 ant 的示例中找到了这个“解决方案” 。问题是ant的示例输出children prop类型字符串，而我的函数输出prop类型数组。这会导致错误。

这是沙箱的链接： https://codesandbox.io/embed/ecstatic-cookies-4nvci ?fontsize=14

注意：如果您取消注释列中的子数组[第 46-59 行]，您将看到我的预期结果应该是什么。

Answer 1

render 方法不应返回带有子数组的对象。要使用该render方法，您必须返回一个有效的 React 组件（或简单的 HTML 标签——如 span）。

但是，就您而言，我更喜欢在将主题传递到表中之前提取主题，然后动态生成子数组。像下面这样：

const renderContent = (value, row, index) => {
  return setupPerformance(value)

};

const setupPerformance = performance => {
  return performance.map(p => {
    const { id, title, percentage } = p;
    return <span>{percentage}%</span>
  });
};
const data = [
  {
    key: 0,
    firstName: "John",
    lastName: "Smith",
    performance: [
      {
        id: 1,
        title: "science",
        percentage: 75
      },
      {
        id: 2,
        title: "physics",
        percentage: 36
      }
    ]
  },
  {
    key: 1,
    firstName: "Ann",
    lastName: "Smith",
    performance: [
      {
        id: 1,
        title: "science",
        percentage: 68,
        timeSpent: 50,
        completionDate: "2019-02-07"
      },
      {
        id: 2,
        title: "physics",
        percentage: 100
      }
    ]
  }
];
let subjects = data[0].performance
const columns = [
  {
    title: "Full Name",
    children: [
      {
        title: "firstName",
        dataIndex: "firstName",
        key: "firstName"
      },
      {
        title: "lastName",
        dataIndex: "lastName",
        key: "lastName"
      }
    ]
  },
  {
    title: "Performance",
    dataIndex: "performance",
    children: 
    subjects.map(e => {
       return {
          title: e.title,
          dataIndex: "performance["+(e.id-1)+"].percentage",
          key: "key-"+e.id,
          render: value => <span>{value}%</span>
        }
    })

  }
];