1

我已经在 Vue 中设置了 grid.js。 https://github.com/grid-js/gridjs

我已经设置了，autoWidth: true并且width: '100%'在配置中。

当我调整窗口大小时，数据网格会调整大小（响应式）。

但是，如果窗口或容器元素调整大小大于初始大小，则网格不会随之调整大小。然而，它会正确地缩小尺寸。

然后我使用 element-resize-detector ( https://github.com/wnr/element-resize-detector/ ) 来观察容器元素的变化并调用

grid.updateConfig(this.config).forceRender();

将网格重绘为新容器大小。这可行，但会导致列排序出现问题。

我正在修改代码来解决这个问题，但想知道是否有人对此有更好/更好的解决方案。

4

1 回答 1

1

要在调整大小后正确更新 grid.js，您可以查看此响应

在调整大小时使用.updateConfig()不是一个好主意，因为每次调整大小时，表格都会重绘。选择此选项会导致 UX 降低，并且对于大型数据集可能非常烦人。

要使用他的容器调整表的大小，您需要侦听容器的大小并通过使用gridjs-wrapper类搜索元素将其设置为表。这样，当您的容器调整网格大小时，网格会自动调整大小而无需更新。

我不使用 Vue 框架，但这是这里想法的一个快速示例：

grid = new gridjs.Grid({
    /* set up you're grid here */
}).render(YOUR_CONTAINER);

// Resize you're grid or call it whenever you want 
setGridSize();

// set the size listener to your grid container
new ResizeObserver(() => setGridSize()).observe(YOUR_CONTAINER);

// function to resize the table with the container size        
function setGridSize(){
  // The grid js wrapper element (assuming you've just one grid on you're page)
  var mywrapper = document.getElementsByClassName("gridjs-wrapper");
  // height and with of you're container
  var height = YOUR_CONTAINER.clientHeight;
  var width = YOUR_CONTAINER.clientWidth;
  // Set it to your grid js wrapper
  mywrapper[0].style.height = height.toString() + "px";
  mywrapper[0].style.width = widht.toString() + "px";
}
于 2021-09-17T13:58:06.297 回答