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

最终效果内容如下

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

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

谢谢！