Angular ui-grid自动高度失效：切换数据后高度未正常更新

我之前在项目里也碰到过一模一样的UI-Grid高度适配坑！明明配置了「少数据自适应、多数据最多显示20行」的规则，但切换到大数据集时高度死活不变，后来折腾了好久才找到几个靠谱的解决办法：

方法一：强制触发Grid高度重计算 #

UI-Grid默认只会在初始化或窗口resize时重新计算高度，切换数据时不会自动触发。所以我们可以在数据加载完成后，手动调用Grid API的方法来强制刷新：

首先确保你已经在Grid配置里注册了API：

$scope.gridOptions = {
  // 你的其他配置项...
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi; // 把API存到$scope里方便后续调用
  }
};

然后在加载完200条数据的回调里，执行这两行代码：

// 用$timeout确保数据已经更新到DOM后再执行
$timeout(function() {
  $scope.gridApi.core.handleWindowResize(); // 触发Grid高度重计算
  $scope.gridApi.core.refresh(); // 刷新Grid整体布局
}, 0);

handleWindowResize()是UI-Grid内置的方法，会重新计算容器高度，刚好能解决我们的问题。

方法二：监听数据变化，动态设置Grid高度 #

如果手动触发API的方式不够稳定，我们可以直接监听数据数组的变化，根据数据长度计算并设置Grid高度：

// 监听你的产品数据数组变化（第三个参数true是深度监听，确保数组内容变化能被捕获）
$scope.$watch('productData', function(newData) {
  if (!newData) return;
  
  const rowHeight = 32; // 替换成你实际设置的行高（默认大概30-32px）
  const headerHeight = 35; // 表头高度，根据你的样式调整
  const maxDisplayRows = 20;
  
  // 计算总高度：表头高度 + 实际显示的行数（最多20行）
  const calculatedHeight = headerHeight + Math.min(newData.length, maxDisplayRows) * rowHeight;
  $scope.gridOptions.height = `${calculatedHeight}px`;
}, true);

这种方式更直接，完全由我们自己控制高度，避免依赖Grid的自动计算逻辑。

方法三：调整Grid配置，优化自适应逻辑 #

你还可以修改Grid的默认配置，让它更「聪明」地处理高度：

$scope.gridOptions = {
  // 你的其他配置项...
  enableVerticalScrollbar: function() {
    // 当数据超过20行时显示滚动条，否则隐藏
    return $scope.productData && $scope.productData.length > 20 ? uiGridConstants.scrollbars.ALWAYS : uiGridConstants.scrollbars.NEVER;
  },
  virtualizationThreshold: 20, // 超过20行启用虚拟化，优化大数据集性能
  maxHeight: function() {
    // 动态设置最大高度为20行的高度
    const rowHeight = 32;
    const headerHeight = 35;
    return `${headerHeight + 20 * rowHeight}px`;
  }
};

不过这种方式需要结合前面的监听逻辑一起用，因为配置里的函数可能不会自动触发重新计算。

为什么会出现这个问题？ #

本质上是UI-Grid的高度自适应逻辑没有绑定数据变化事件——它默认只在初始化、窗口大小变化时重新计算高度，当你在不刷新页面的情况下切换数据集，Grid并不知道数据量已经变了，所以还保持着之前的高度。

内容的提问来源于stack exchange，提问作者Mangrio