最终效果内容如下

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

谢谢！