如何在 AntDesign 的 Table 组件中为溢出的文本添加省略号？

Question

问题： 当使用 AntDesign 的 Table 组件时，我设置了每个单元格的宽度，当文本溢出时，我希望文本被截断并显示省略号。最终目标是当用户将鼠标悬停在省略号上时，让省略号显示带有隐藏文本的工具提示。

这是我当前的代码

<Table
          scroll={{ x: 1500, y: 240 }}
          pagination={false}
          columns={displayFile.headers.map((header) => ({
            title: header.name,
            dataIndex: header.name,
            width: "10rem",
          }))}
          dataSource={displayFile.data.map((row, index) => ({
            ...row,
            rowKey: `${displayFile.name}-row_${index}`,
          }))}
          rowKey={(record: any) => record.rowKey}
        />

任何见解将不胜感激。谢谢你！

Answer 1

就这样做。

<Table
//your table props
>

    <Column
        title="Col1"
        key="col1"
        dataIndex="col1"
        width={120}
        ellipsis={true}
    />
    <Column
        title="Col2"
        key="col2"
        dataIndex="col2"
        width={120}
        ellipsis={true}
    />
</Table>