表格列宽怎么可以根据数据列数来展示不同效果?
问题描述
在使用 VTable 表格库做报表数据展示时,如果列的总数不足以撑开整个容器的宽度,我想能自动拉宽来适应容器大小,但当列的数量较多总宽度大于容器宽度时,又可以正常出滚动条来横向滚动。这个效果怎么实现呢?
解决方案
根据你的问题,我的理解是你想要根据数据的总列宽来动态调整宽度模式,在 VTable 中宽度模式 widthMode 有:
standard按 with 设置来设置每列的宽度autoWidth按单元格内容自动计算列宽adaptive按容器宽度缩放,撑满容器的宽度。 那就是如果列数较少不足以铺满容器的时候,你想要 adaptive 的效果,如果总列宽超过容器宽度,想要standard或者autoWidth的效果。有两种方式可以实现:
- 可以已经 VTable 实例的接口,getAllColsWidth 来获取总列宽和容器的宽度做对比,然后根据情况来改变 widthMode。
- 比较省事的一个方式,VTable 提供了一个很优化的配置项
autoFillWidth,配置这个就能完美做到你想要的效果。另外也有相应的高度设置autoFillWidth。

代码示例
const option = {
records,
columns,
limitMaxAutoWidth: 800,
autoFillWidth: true
// widthMode: "autoWidth",
// heightMode: "autoHeight"
};
结果展示
