antd react Table 列表 内容超出宽 省略号显示 以及 浮窗 Tooltip
let columns = [
{
title: '政策名称', dataIndex: 'name', key: "name", width: 100,
onCell: () => {
return {
style: {
maxWidth: 100,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer'
}
}
},
render: name => (
<Tooltip placement="topLeft" title={
name}>
{
name}
</Tooltip>
)
},
]
onCell: () => {
return {
style: {
maxWidth: 100,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer'
}
}
},
- 这里表示设置宽度超出部分省略号显示 随着屏幕缩放显示效果很优雅
render: name => (
<Tooltip placement="topLeft" title={
name}>
{
name}
</Tooltip>
- 表示浮窗 Tooltip 属性
- placement=“topLeft” 表示鼠标悬停时，显示的文字靠左边