如何在Ant Design Table的数组类型数据值之间添加逗号和空格分隔

普通数组文本字段处理 #

如果数组字段仅需要展示纯文本内容，直接在列配置的render函数中调用数组的join(', ')方法即可实现元素按逗号+空格分隔显示：

{
  title: '数组字段',
  dataIndex: 'yourArrayField',
  key: 'yourArrayField',
  render: arr => Array.isArray(arr) ? arr.join(', ') : ''
}

建议添加Array.isArray判断，避免字段为非数组时抛出异常。

多Tag标签间加逗号分隔 #

你可以直接使用已导入的Antd Space组件的separator属性实现需求，该方案会自动在相邻标签之间插入指定分隔符，不会在最后一个标签末尾多余显示逗号，修改后的Tags列配置如下：

{
  title: 'Tags',
  key: 'tags',
  dataIndex: 'tags',
  render: tags => (
    <Space separator=", ">
      {tags.map(tag => {
        let color = tag.length > 5 ? 'geekblue' : 'green';
        if (tag === 'loser') {
          color = 'volcano';
        }
        return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
      })}
    </Space>
  ),
}

如果不想依赖Space组件，也可以手动判断索引添加分隔符：

{
  title: 'Tags',
  key: 'tags',
  dataIndex: 'tags',
  render: tags => (
    <>
      {tags.map((tag, index) => {
        let color = tag.length > 5 ? 'geekblue' : 'green';
        if (tag === 'loser') {
          color = 'volcano';
        }
        return (
          <React.Fragment key={tag}>
            <Tag color={color}>{tag.toUpperCase()}</Tag>
            {index !== tags.length - 1 && ', '}
          </React.Fragment>
        )
      })}
    </>
  ),
}

内容的提问来源于stack exchange，提问作者pram