[Feature] 希望添加表格自适应容器的新模式
What problem does this feature solve?
目前 autoFillHeight 或 autoFillWidth 配置项设置为 true 后,在行数/列数少,表格高度/宽度不满容器的时候,表格高度/宽度自动撑满容器,但行高/列宽也会随着撑开。希望添加一种新的自适应模式:仅表格适应容器,而行高/列宽不适应。
What does the proposed API look like?
autoFillHeight 和 autoFillWidth 新增枚举值。
已经可以了 @YiiGuxing
已经可以了
@YiiGuxing
@fangsmile 请问这个功能是哪个版本开始支持的,我用 1.15.1 版本试了一下配置 canvasHeight 为 auto,容器不指定高度,表格将不会显示出来。
另外,其实该需求是在容器宽高确定时,表格适应容器的情况下的。以高度为例,期望的是如图所示的效果:
红色边框为表格的尺寸,也就是绘制出来(视觉上)的表格的尺寸和 canvas (或者容器)的尺寸要一样,当列的总宽度大于表格宽度时,水平滚动条应出现在蓝色框的位置,而不是图中实际水平滚动条出现的那个位置。竖直滚动条同理。
如果总行高和总列宽小于容器的尺寸,目前的效果给人的感觉是整个表格只占了容器的一部分,而不是整个容器是一个表格,如果容器周围有其他的东西,整体看来就显得并不协调。
又例如,当我们通过鼠标交互的方式调整列宽时,目前的效果表现为整个表格的宽度也随之调整了,如下图所示:
如果按此需求所提出的新模式,同样的操作,表格主体的宽度不变,仅改变其内部的列,就不会有这种问题。
总而言之,希望能支持一种表格布局模式。在这种模式下,无论表格内容如何改变,或是用户进行何种操作,表格的宽度、高度或两者都始终保持与容器一致不变,且行或列可以不拉伸去填充空白的空间。
@YiiGuxing 可以帮忙贡献这个效果
开源之夏学生认领该issue
https://visactor.com/vtable/option/ListTable#theme.scrollStyle.barToSide @YiiGuxing 为什么听着像这个情况呢?
visactor.com/vtable/option/ListTable#theme.scrollStyle.barToSide @YiiGuxing 为什么听着像这个情况呢?
@fangsmile 设置这个属性虽然滚动条确实是出现在容器边缘上了,但表格的大小还是没有和容器一样:
配置:
const option = {
theme: {
frameStyle: { borderLineWidth: 2, borderColor: "red" },
scrollStyle: { barToSide: true }
}
};
该需求主要还是在表格大小要始终与容器大小一样上,也就是表格的 frame 的尺寸要与 canvas 的尺寸始终一致。
想确认下这个需求是要保证表格的frame尺寸和canvas尺寸一致并且内容不拉伸这样吗 @YiiGuxing
想确认下这个需求是要保证表格的frame尺寸和canvas尺寸一致并且内容不拉伸这样吗 @YiiGuxing
是的,内容在竖直方向和水平方向上者不拉伸。
是这样的效果吗 @YiiGuxing
@huccct 看起来是的,当然这个拉不拉伸应该还是要根据列宽模式和行高模式来决定。
@huccct 看起来是的,当然这个拉不拉伸应该还是要根据列宽模式和行高模式来决定。
eg:
- 固定 xx px,containerFit时保持不变,不可拖拽调整
- auto自适应,containerFit时可调整,可拖拽调整
- 百分比,containerFit时可调整,可拖拽调整
- calc计算,containerFit时可调整,可拖拽调整
是这个意思吗 @YiiGuxing
@huccct 不是,我指的是这个:https://visactor.com/vtable/guide/basic_function/row_height_column_width