vueComponent/ant-design-vue-pro

a-table的列数量不固定时应该如何处理列宽度和表宽度

HyalineSoft opened this issue · 1 comments

Question (问题描述)
我有一个a-table,它的columns前两列固定在左侧(fixed: 'left'),后面的列根据用户的配置动态展示列数,因此列数从1到30都有可能,并且要求列数量超出屏幕时自动出现滚动条。

现在我获取了用户配置的列数据,为每个列的width分配了固定宽度,并把所有列宽之和赋予a-table的scroll.x属性。

但它在不同尺寸电脑下会多出一部分区域,这影响了用户体验。而且我认为这种情况为width分配固定值不合理,因为列的内容不一样,宽度也不会同。
wenti

Describe the solution you'd like (你期待的是什么?)
希望有一个更简单的方案处理这种动态列的列宽,而且希望列数量太多时会出现横向滚轴。
因为固定列宽在不同屏幕显示也不一样,而百分比又不适用于列数量不固定并且内容长度不确定的情况。

Additional context(附加信息)
以下只展示目前方案的大概流程:
1.模板大概结构
a-table :columns="columns" :scroll="{ x: tableWidth, y: 400 }"
2.初始化columns,并添加两个固定列,width赋值150
3.从服务端获取用户配置的列并绑定上columns,并为每个width赋值150
4.将所有列宽的和相加,赋予a-table的x轴宽度
this.tableWidth = columns.length * 150;

已解决。官方文档原话:
若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。