newline - Antd表格如何将文本分几行放入单元格中

Question

在 Antd 中有一种方法可以将表格单元格中的文本显示为多行。我尝试将</br>, \n, \r 放入文本中。

有没有人已经找到办法做到这一点？

Answer 1

最后这是我的解决方案。

当需要换行时，每列的文本都包含一个 \n。

在表格定义之后，我把样式 whiteSpace: 'pre':

<Table style={{ whiteSpace: 'pre'}} columns={columns} dataSource={data} title={title} .../>

这似乎按预期工作。

Answer 2

希望在这里回答问题永远不会太晚：D

使用表格单元格的渲染器，如下所示，您可以在其中使用 HTML 标记（我正在使用 React，因此它被格式化为带有 <> </> 父元素的 ReactNode）：

const columns = [
    {
      title: "Start",
      dataIndex: "start",
      key: "start",
      render: (text) => <>
      <p>{text.split("@")[0]}</p>
      <p>{text.split("@")[1]}</p>
      </>
    },
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => text
    }]