ant-design vue 中ant-table表头和body的列不对齐

423 阅读1分钟

作者在开发公司的一些业务时,用表格组件时,开启了最又侧fixed,遇固定列无法和表头对齐的情况,在此记录解决历程。

右侧fixed无法对齐

image.png

解决办法

原代码:

因为作者开始认为fixed后,肯定需要拖动,所以设置.ant-table-body默认overflow: auto !important,这导致一个什么问题呢,就是x轴数据比较多 拖动是没问题的,但是y轴有拖动会导致表头默认多出来一个scrollbar来占位,所以导致无法对齐。

:deep(.ant-table-body) {
    max-height: 100%;
    overflow: auto !important;
}

解决代码:

去掉overflow,不设置,表格组件会根据数据多少自动开启overflow来对齐!

image.png

:deep(.ant-table-body) {
    max-height: 100%;
    // overflow: auto !important;
}

当然a-table需要开启scroll参数

 <a-table
    class="zt-table" 
    :columns="columnSubData" 
    :data-source="dataSubSource"
    :scroll="{ y: '100%',  x: '100%' }"  //这个有具体宽高最好
    :pagination="false" 
>