react antd 表格表头不对齐的解决方案

bug图

1634456554(1).jpg

解决方案：表头columns一列不设置width ,scroll.x设置大于columns里面width之和

1634456652(1).jpg

封装表格统一计算设置scroll.x

import React,{Component} from "react";
import {Table} from "antd";
import "./index.less";
class TableComp extends Component{
    render(){
        //用于解决antd表格表头不对齐bug 一列不设置width scroll.x>width
        var width = 0;
        this.props.columns.map((e)=>{
            if(e.width){
                width = width+e.width;
            }
        })
        width = width+200;
        return ( 
             columns.id}
            key={this.props.keys?this.props.keys:'table'} 
            loading={this.props.loading}>
        )
    }
}
export default TableComp;

效果图

image.png