[javascript]如何在调整大小后正确更新（重绘）网格.js

· 收录于 2024-01-06 16:45:08 · source URL

问题详情

我已经在 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();

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

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

最佳回答

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

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

如何

在我看来，这里最好的方法是在网格的配置中使用自定义 css 样式（如 container：{height：100%， width：100%} 和 height/width）设置为 100% 来设置您的表以适合容器大小。

为什么

事实上，您需要在样式 AND 配置中设置 height 和 with，因为 config 中的 with/height 属性作用于 gridjs-wrapper HtmlElement，您需要在 css 属性正常工作之前安装他的父 gridjs-container