最終效果內容如下

創建公共組件獲取表格寬度

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 (

this.container = node} style={DtStyle} className={DtClass}>{this.props.children}

)

}

}

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=> {text} }

謝謝！

總結

以上是生活随笔為你收集整理的antd 能自适应吗_react 基于antd表格自适应宽度显示。。。鼠标滑动显示详细内容解决办法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。