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？

标签： javascriptreactjsantd

Answer 1

您需要使用colSpan.Column

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

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

我只是调整了官方的例子。

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 />