react 基于antd表格自适应宽度显示。。。鼠标滑动显示详细内容解决办法

最终效果内容如下

1. 创建公共组件获取表格宽度

class EllipsisTooltip extends React.Component {
    constructor(props){
        super(props);
        this.state={
            visible: false,
            DtStyle:{},
            DtClass:'',
        }
    }
    componentDidMount(){ this.getItemWidth() }
    getItemWidth=()=>{
        if(this.container){
            this.setState({
                DtStyle:{width:`${this.container.clientWidth}px`},
                DtClass:'NowrapAndTitle'
            })
        }
    } 
  render () {
    const {DtStyle,DtClass}=this.state;
    return (
        <div className="PublicTableTooltip">
            <Tooltip placement="topLeft" title={this.props.title} overlayClassName="ItemPublicTableTooltip">
                <div ref={node => this.container = node} style={DtStyle} className={DtClass}>{this.props.children}</div>
            </Tooltip>
        </div>
    )
  }
}
export default EllipsisTooltip

2.设置表格内的样式

.PublicTableTooltip{
    .NowrapAndTitle{
    // 不换行显示。。。
    text-align: left;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.ItemPublicTableTooltip{
  .ant-tooltip-inner{
    background-color: rgba(24, 145, 150, 0.75);
  }
  .ant-tooltip-arrow{
    border-top-color: rgba(24, 145, 150, 0.75);
  }
}

3.基本功能实现哪里需要哪里调用即可

import EllipsisTooltip from '../../../xxx/xxx/TableTools';

{ title: '子项目名称', dataIndex: 'ItemProjName',render:text=> <EllipsisTooltip title={text}> {text} </EllipsisTooltip>}

谢谢！