Question

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

我需要一个表格，该表格显示用户列表以及每个类别的性能，如下例所示。

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

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

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

Answer 1

render方法不应返回带有children数组的对象。要使用render方法，您将必须返回一个有效的React组件（或简单地返回HTML标记-跨度）。

但是，在您的情况下，我希望我们先提取主题，然后再将其传递到表中，然后动态生成子数组。如下所示：


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>
        }
    })

  }
];

带有动态子栏的蚂蚁设计表

1 个答案: