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 ( 
            <Table columns={this.props.columns} 
            bordered 
            scroll={{
                y:this.props.scroll?(this.props.scroll.y?this.props.scroll.y:false):false,
                x:this.props.scroll?(this.props.scroll?width:false):false}} 
            rowSelection={this.props.rowSelection}
            pagination={this.props.pagination} 
            dataSource={this.props.dataSource} 
            rowKey= {columns => columns.id}
            key={this.props.keys?this.props.keys:'table'} 
            loading={this.props.loading}></Table>
        )
    }
}
export default TableComp;

效果图

image.png