因此，解决方案是使用 HOT 实例的 manualColumnWidths 数组。该数组将自动设置所有列的宽度。它嵌套在代码中的某个地方，因此只要 DOM 发生更改，它就会更新，这就是为什么在元素本身的宽度上使用 CSS 或 jQuery 不起作用的原因。这是一个很好的结构，我们只需要在某个地方更明确地写出来。
请注意，您可以对 rows 重复此操作，只需使用 manualRowHeights 以及其余的 row 方法即可。
现在，您将如何设置列大小调整事件的最大值和最小值。将afterColumnResize 选项设置为以下函数：
function setAfterColumnResize() {
return function(col, size) {
var headers = $(".colHeader"); // first is empty if there are rowHeaders
var maxW = [10, 200, 400]; // note that the first is the row header
var minW = [1, 100, 100]; // note that the first is the row header
var actualCol = col + 1; // this is to account for the row header
var maxColW = maxW[actualCol];
var minColW = minW[actualCol];
var actualW = $(headers[actualCol]).parent().parent().width();
if (hot && maxColW && actualW > maxColW) {
hot.manualColumnWidths[col] = maxColW;
hot.render()
}
if (hot && minColW && actualW < minColW) {
hot.manualColumnWidths[col] = minColW;
hot.render()
}
}
}
现在让我解释一下。当此事件被触发时，您首先使用它为您提供的col 索引找到标题。如果您将行标题设置为true（这是我在这里和小提琴中所做的），请更正它。然后你设置最大/最小宽度的数组（当然你可以在你的代码中更优雅地做到这一点）。
然后通过查看跨度的父级父级来获取相关列的实际当前宽度（这有点混乱，但这是我发现的最简单的方法）。后面的条件应该是不言自明的。
最后，重要的部分。你可以看到通过访问hot.manualColumnWidths 可以设置你想要的宽度。如果我当前的宽度超过它，我将它设置为最大值。然后重新渲染就完成了！
存在一些问题，例如这些事件仅在调整大小后才会被调用，因此如果您最初将表格设置为以大于最大宽度进行渲染，它不会做任何事情。如果是这种情况，只需在第一次渲染表格后调用此函数（每列调用一次）。
如果您不想使用列大小调整事件，也会出现这种情况；在这种情况下，它只是一个您在渲染后调用的普通函数。
希望这会有所帮助！ Here 是一个演示小提琴，展示了它的实际效果：D