如何在 Antd Table 中将多个数据显示到单个列中？

Question

所以我想在 ant 设计表的单个单元格中显示多个数据。 似乎它只允许插入单个数据元素。 是否可以将多个数据组合到一个单元格中？

这是数据 object 的样子：

data {
    transactionNo
    transactionTypeNo
    transactionType
    createdTstamp
    sourceNo
    accountNo
    currencyCd
    
  }

这些是表格列

const columns = [
{
  title: 'Transaction No',
  dataIndex: 'transactionNo',
  key: 'transactionNo',
  align: 'left',
  },
},
{
  title: 'Transaction Date',
  dataIndex: 'createdTstamp',
  defaultSortOrder: DESC,
  sortable: true,
  key: 'createdTstamp',
},
{
  title: 'Description',
  dataIndex: 'transactionType',
  key: 'transactionType',
  align: 'left',
  textWrap: 'wrap',
  defaultHidden: false,
  render: ( record) => (
    <>{record.transactionType}</>
  ),
},

我想在单个单元格中同时显示transactionType和sourceNo 。 已经尝试使用记录但没有运气。 我正在使用 typescript 做出反应。

Answer 1

您可以在 antd Columns 中使用 Render Method。 你已经发现差不多了，只需要正确引用记录..

{
  title: 'Description',
  dataIndex: 'transactionType',
  key: 'transactionType',
  align: 'left',
  textWrap: 'wrap',
  defaultHidden: false,
  // in Render first param returns current field, second params return entire data
  render: (text, record) => (
    <>{record.transactionType} {record.sourceNo}</>
  ),
},