记录开发过程遇到ant-design table组件列间有空白间隙/留白

495 阅读1分钟

现象描述

ant-design table组件固定列、固定表头后列间有空白间隙/留白

问题原因及解决方案

官方文档上注释:注意,且非固定列宽度之和不要超过 scroll.x。此问题可能是由于这个原因导致的,当表格列数不固定时需要动态设置计算scroll.x的值

getX(columns: any[]) {
    if(this.x) {
        return this.x
    }
    this.x = columns.reduce((total,item) => {
        const item = item.width || 100
        item.width = width
        total+=width
    },0)
    //预留20buffer
    this.x = this.x + 20
    return this.x
}