javascript - antd中多列表中制作单独的单列行

Question

所以我在 antd 中有一个常规表格，其中包括 3 列

<Table dataSource={data}>
  <Column title="Age" dataIndex="age" key="age" />
  <Column title="Address" dataIndex="address" key="address" />
  <Column title="Tags" dataIndex="tags" key="tags" />
</Table>

但我希望在表中每 20 个条目之后显示一个广告作为一行。有没有办法使用 antd 表来实现此目的，或者我应该恢复到 data.map？

Answer 1

您需要使用colSpan property of Column .

在所需的索引上(在示例中为 3)，将所有列跨度设置为 0 并将特定条目设置为表长度 5

• obj.props.colSpan = 0;
• props: { colSpan: 5 }

我刚刚调整了 official example .

const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {}
  };
  if (index === 3) {
    // On target every other column is not showing
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (index !== 3) {
        return <a href="javascript:;">{text}</a>;
      }
      return {
        children: <a href="javascript:;">{text}</a>,
        // The target takes all column span
        props: {
          colSpan: 5
        }
      };
    }
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent
  }, 
  ...
];

const data = [..]

<Table columns={columns} dataSource={data} bordered />