Skip to content

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

@HyalineSoft

Description

@HyalineSoft

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    questionFurther information is requested

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions