Ant Design Vue中table表格使用fixed出现空白列原因及解决方法

1,827 阅读1分钟

一、出现原因

表格列均设置了固定的宽度,而又设置了:scroll="{ x: 固定值 }",导致屏幕过大或缩小时出现多余空间,进而出现空白列。

Snipaste_2024-05-30_10-27-59.png

二、解决方法

1、通过添加CSS属性样式,通过修改设有fixed属性表格的边框,进而解决出现空白列,但这种情况也会导致出现一些样式的不美观,具体实现代码如下,及修改后的效果显示如下图:

.ant-table-bordered .ant-table-fixed-right table { border-left: none;}

Snipaste_2024-05-30_10-36-34.png

如上图所示

2、通过更改表格列中的某列宽度让其自适应,也就是不为其设置宽度,后设置:scroll="{ x: 固定值 }"中的x值,其值设为表格中每个列的总宽度的和,包括你设置自适应那列的想要的宽度,再次强调是全部列宽度的总和,因为这样自适应那列就会分布到你想要设置的宽度了。如果x的值大于每列总的宽度,那么多余的宽度就会分布添加到你设为自适应的那列宽度,相当于自适应的那列宽度得到一个min-width样式,反之若是x小于总列宽,则自适应的那列的宽相之也会变小。因此设为这若是出现多余的空间,就会分配到该列,显示效果也更加友好。

PS:新人新文章,刚出炉的小白,这种方法是自己在项目中遇到问题,想到解决的方法,如若不对或是遗漏,欢迎各位大佬批评和指教