VTable icon indicating copy to clipboard operation
VTable copied to clipboard

[Feature] 希望添加表格自适应容器的新模式

Open YiiGuxing opened this issue 11 months ago • 3 comments

What problem does this feature solve?

目前 autoFillHeightautoFillWidth 配置项设置为 true 后,在行数/列数少,表格高度/宽度不满容器的时候,表格高度/宽度自动撑满容器,但行高/列宽也会随着撑开。希望添加一种新的自适应模式:仅表格适应容器,而行高/列宽不适应。

What does the proposed API look like?

autoFillHeightautoFillWidth 新增枚举值。

YiiGuxing avatar Jan 20 '25 07:01 YiiGuxing

Image 已经可以了 @YiiGuxing

fangsmile avatar Jan 21 '25 02:01 fangsmile

Image 已经可以了 @YiiGuxing

@fangsmile 请问这个功能是哪个版本开始支持的,我用 1.15.1 版本试了一下配置 canvasHeightauto,容器不指定高度,表格将不会显示出来。

另外,其实该需求是在容器宽高确定时,表格适应容器的情况下的。以高度为例,期望的是如图所示的效果:

Image

红色边框为表格的尺寸,也就是绘制出来(视觉上)的表格的尺寸和 canvas (或者容器)的尺寸要一样,当列的总宽度大于表格宽度时,水平滚动条应出现在蓝色框的位置,而不是图中实际水平滚动条出现的那个位置。竖直滚动条同理。

如果总行高和总列宽小于容器的尺寸,目前的效果给人的感觉是整个表格只占了容器的一部分,而不是整个容器是一个表格,如果容器周围有其他的东西,整体看来就显得并不协调。

又例如,当我们通过鼠标交互的方式调整列宽时,目前的效果表现为整个表格的宽度也随之调整了,如下图所示:

Image

如果按此需求所提出的新模式,同样的操作,表格主体的宽度不变,仅改变其内部的列,就不会有这种问题。

总而言之,希望能支持一种表格布局模式。在这种模式下,无论表格内容如何改变,或是用户进行何种操作,表格的宽度、高度或两者都始终保持与容器一致不变,且行或列可以不拉伸去填充空白的空间。

YiiGuxing avatar Jan 21 '25 03:01 YiiGuxing

@YiiGuxing 可以帮忙贡献这个效果

fangsmile avatar Apr 23 '25 09:04 fangsmile

开源之夏学生认领该issue

huccct avatar May 04 '25 10:05 huccct

https://visactor.com/vtable/option/ListTable#theme.scrollStyle.barToSide @YiiGuxing 为什么听着像这个情况呢?

fangsmile avatar May 29 '25 11:05 fangsmile

visactor.com/vtable/option/ListTable#theme.scrollStyle.barToSide @YiiGuxing 为什么听着像这个情况呢?

@fangsmile 设置这个属性虽然滚动条确实是出现在容器边缘上了,但表格的大小还是没有和容器一样:

Image

配置:

const option = {
      theme: {
        frameStyle: { borderLineWidth: 2, borderColor: "red" },
        scrollStyle: { barToSide: true }
      }
};

该需求主要还是在表格大小要始终与容器大小一样上,也就是表格的 frame 的尺寸要与 canvas 的尺寸始终一致。

YiiGuxing avatar May 29 '25 12:05 YiiGuxing

想确认下这个需求是要保证表格的frame尺寸和canvas尺寸一致并且内容不拉伸这样吗 @YiiGuxing

huccct avatar Jun 03 '25 17:06 huccct

想确认下这个需求是要保证表格的frame尺寸和canvas尺寸一致并且内容不拉伸这样吗 @YiiGuxing

是的,内容在竖直方向和水平方向上者不拉伸。

YiiGuxing avatar Jun 03 '25 23:06 YiiGuxing

Image

Image 是这样的效果吗 @YiiGuxing

huccct avatar Jun 04 '25 10:06 huccct

@huccct 看起来是的,当然这个拉不拉伸应该还是要根据列宽模式和行高模式来决定。

YiiGuxing avatar Jun 04 '25 11:06 YiiGuxing

@huccct 看起来是的,当然这个拉不拉伸应该还是要根据列宽模式和行高模式来决定。

eg:

  • 固定 xx px,containerFit时保持不变,不可拖拽调整
  • auto自适应,containerFit时可调整,可拖拽调整
  • 百分比,containerFit时可调整,可拖拽调整
  • calc计算,containerFit时可调整,可拖拽调整

是这个意思吗 @YiiGuxing

huccct avatar Jun 04 '25 11:06 huccct

@huccct 不是,我指的是这个:https://visactor.com/vtable/guide/basic_function/row_height_column_width

YiiGuxing avatar Jun 04 '25 16:06 YiiGuxing