其主要利用x滚动条,让数据完全展现。
但是有的需求是数据一屏展示不滚动,当屏幕足够小时,单元格内容用省略号代替,然后用Tooltip展示内容
先创建一个 工具 组件 EllipsisTooltip
import React from 'react'
import { Tooltip } from 'antd';
class EllipsisTooltip extends React.Component {
state = {
visible: false
}
handleVisibleChange = (visible) => {
if (this.container.clientWidth < this.container.scrollWidth) {
this.setState({
visible: visible
})
}
}
render () {
const style = {
textOverflow: 'ellipsis',
overflow: 'hidden',
...this.props.style
}
return (
<Tooltip visible={this.state.visible} onVisibleChange={this.handleVisibleChange} title={this.props.title}>
<div ref={node => this.container = node} style={style}>{this.props.children}</div>
</Tooltip>
)
}
}
export default EllipsisTooltip