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>}

謝謝！