制表符布局：“fitColumns”会导致 DIV 振动

如何解决制表符布局：“fitColumns”会导致 DIV 振动

我在 flexBox 的一个元素中包含了一个 tabulator 4.9。 flexBox 元素有 flex-grow>0.

我的一些专栏在最初的抽奖过程中是隐藏的。表格上方的选择元素隐藏列并显示选定的列，并重新绘制表格。

当使用 layout:"fitColumns" 时，表格第一次渲染时有两个问题-

1. 表格比它的容器宽，大约是滚动条的宽度。更改表格上方的选择框会导致表格重绘并修复此问题。
2. 桌子不规律地振动。容器 DIV 和表格都前后移动 1 或 2 个像素。他们似乎陷入了反馈循环。

我使用的是 Chrome 87.0.4280.141（官方版本）（64 位）

这里的例子： https://beta.tspcenter.com/tabulator.php

制表符代码：

table = new Tabulator("#leaderboardTablesContainer",{
    height: "311px",layout:"fitColumns",index:"Username",data: results,columns:headers,initialSort:[{column:firstVisibleColumn,dir:"desc"}]
}); 

选择元素代码：

select.addEventListener('change',function(e) {
    table.clearFilter();
    table.hideColumn(table.currentColumnVisible);
    table.showColumn(e.target.value);
    table.setSort(e.target.value,"desc");
    table.currentColumnVisible = e.target.value;
    table.setFilter(e.target.value,"!=","");
    table.redraw();
});

解决方法

我不确定为什么会这样。但是在 flex 元素上指定宽度可以解决这个问题。

flex: 2000 1 450px; width: 5px;

这似乎违背了我对 flexbox 的理解。事实上，无论如何，flexbox 的长度都超过了 5px。这看起来有点笨拙，但它停止了反馈循环问题并且表格显示正确。