最终效果内容如下
创建公共组件获取表格宽度
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 (
)
}
}
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} }
谢谢！
)
)
)
