antd table 使用的列使用 ellipsis: true 自动省略属性 + Tooltip 导致位置弹窗错位
复现示例
具体现象
- 使用
antd
的table
的ellipsis: true
实现自动省略 - 展示内容由于被省略需要通过
tooltip
查看全部 tooltip
并不在对应列的统一位置上,而是根据长度不同位置不同,导致出现在其他列上的现象
问题原因
使用 ellipsis: true
时,列中 span
的宽度为实际宽度只是视觉上进行的省略操作,导致 tooltip
按照上述宽度进行居中显示判断,造成显示在其他列的结果
解决办法
- 将
tooltip
展示更改为居左,即设置placement="topLeft"
可以保证tooltip
在于其位置,不会错位到其他类 tooltip
中使用div
包裹(不能是span
),并自行实现超长自动省略样式,具体如下:
// 超长自动省略样式
const ellipsisStyle = {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
width: '150px',
}
// 使用 ellipsis: true 写法
{
title: "姓名",
dataIndex: "name",
ellipsis: true,
width: 200,
render: (name) => <Tooltip title={name}>{name}</Tooltip>
},
// 使用 div 自行实现省略样式
{
title: "姓名",
dataIndex: "name",
ellipsis: true,
width: 200,
render: (name) => <Tooltip title={name}><div style={ellipsisStyle}>{name}</div></Tooltip>
},
使用 方法2 对应列宽度如上图所示,可以保证 tooltip
不会错位