react 单元格内容用省略号代替，然后用Tooltip展示内容

 

其主要利用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