Antd table 如何将文本分几行放入单元格

Question

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

有人已经找到方法了吗？

Answer 1

最后是我的解决方案。

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

进入 table 定义后，我将样式 whiteSpace: 'pre':

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

这似乎符合预期。

Answer 2

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

使用 table 单元格的渲染器，如下所示，您可以在其中使用 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
    }]

Antd table 如何将文本分几行放入单元格

Antd table how to put text into cell in several lines

newline

cell

break

antd