前端 - 表格列宽怎么可以根据数据列数来展示不同效果？

Question

在使用VTable表格库做报表数据展示时，如果列的总数不足以撑开整个容器的宽度，我想能自动拉宽来适应容器大小，但当列的数量较多总宽度大于容器宽度时，又可以正常出滚动条来横向滚动。这个效果怎么实现呢？

Answer 1

解决方案 Solution

根据你的问题，我的理解是你想要根据数据的总列宽来动态调整宽度模式，在VTable中宽度模式widthMode有:

• standard 按with设置来设置每列的宽度
• autoWidth 按单元格内容自动计算列宽
• adaptive 按容器宽度缩放，撑满容器的宽度。

那就是如果列数较少不足以铺满容器的时候，你想要adaptive的效果，如果总列宽超过容器宽度，想要standard或者autoWidth的效果。有两种方式可以实现：

1. 可以已经VTable实例的接口，getAllColsWidth来获取总列宽和容器的宽度做对比，然后根据情况来改变widthMode。
2. 比较省事的一个方式，VTable提供了一个很优化的配置项autoFillWidth，配置这个就能完美做到你想要的效果。另外也有相应的高度设置 autoFillWidth。

代码参考 Code Example

const option = {  records,  columns,  limitMaxAutoWidth: 800,  autoFillWidth: true,  // widthMode: "autoWidth",  // heightMode: "autoHeight"};

结果展示 Results

在线效果参考：https://codesandbox.io/s/vtable-autfillwidth-6kz69n

相关文档 Related Documentation

列宽相关教程：https://visactor.io/vtable/guide/basic_function/row_height_co...

相关api：https://visactor.io/vtable/option/ListTable#autoFillWidth

github：https://github.com/VisActor/VTable

Answer 2

可以看看下面几个属性
https://visactor.io/vtable/option/ListTable#autoFillWidth

https://visactor.io/vtable/option/ListTable#widthMode('standard'%20%7C%20'adaptive'%20%7C%20'autoWidth')%20=%20'standard'

https://visactor.io/vtable/option/ListTable-columns-text#minW...

Answer 3

你可以使用CSS中的table-layout: auto属性来实现这个效果。具体操作如下：

• 设置表格的table-layout属性为auto，这样表格列宽会根据内容自适应。
• 如果列的总宽度不足以撑开容器的宽度，你可以设置表格的宽度为100%，使其占满容器的宽度。
• 如果列的总宽度大于容器的宽度，你可以为表格的容器添加overflow-x: scroll属性，使得宽度超出容器宽度时出现横向滚动条。

下面是一个示例的CSS样式：

.table-container {  overflow-x: scroll;}.table {  table-layout: auto;  width: 100%;}

之后，你可以使用VTable表格库来创建这个table。