更新vue-ag-grid的columnDefs时如何避免水平滚动位置重置？

问题描述 #

我尝试用updateGridOptions方法更新Vue AG-Grid的columnDefs，但操作会把水平滚动位置重置到初始状态，用户体验很差。

初始使用的代码片段：

agGridRefs.value[`agGrid${index}`].api.updateGridOptions({ columnDefs: [rowToUpdate] })

补充代码：
模板部分：

<div class="grid-row" v-for="(columnDefs, index) in filteredColumnDefsList" :key="index">
  <ag-grid-vue
    :ref="`${gridUUID}_${index}`"
    :columnDefs="columnDefs"
    @grid-ready="onGridReady($event)"
    @columnMoved="handleColumnMoved($event, index)"
    :width="props.projectWidth"
  >
  </ag-grid-vue>
</div>

处理函数：

function handleColumnMoved($event, index){
  const columnDef = anotherFunction(...params)
  agGridRefs.value[`${gridUUID.value}_${index}`].api.addEventListener('modelUpdated', () => {
    const columnsWithHeaderComponent = getColumnsWithHeaderComponent(
      agGridRefs.value[`${gridUUID.value}_${index}`].api.getColumnDefs()
    )
    agGridRefs.value[`${gridUUID.value}_${index}`].api.ensureColumnVisible(
      columnsWithHeaderComponent,
      'middle'
    )
  })
  agGridRefs.value[`${gridUUID.value}_${index}`].api.updateGridOptions({
    columnDefs: [columnDef]
  })
  columnDefsList.value[index] = columnDef
}

解决方案 #

方法一：保存并恢复滚动位置 #

在更新columnDefs前记录当前水平滚动偏移量，更新完成后恢复该位置：

function handleColumnMoved($event, index){
  const gridApi = agGridRefs.value[`${gridUUID.value}_${index}`].api;
  // 保存当前水平滚动位置
  const scrollLeft = gridApi.getHorizontalPixelRange().left;
  
  const columnDef = anotherFunction(...params);
  
  // 移除旧的监听，避免重复触发
  gridApi.removeEventListener('modelUpdated', restoreScroll);
  
  function restoreScroll() {
    // 恢复滚动位置
    gridApi.setHorizontalScrollPosition(scrollLeft);
    // 保留原有列可见逻辑
    const columnsWithHeaderComponent = getColumnsWithHeaderComponent(gridApi.getColumnDefs());
    gridApi.ensureColumnVisible(columnsWithHeaderComponent, 'middle');
    // 执行后移除监听
    gridApi.removeEventListener('modelUpdated', restoreScroll);
  }
  
  gridApi.addEventListener('modelUpdated', restoreScroll);
  
  // 更新columnDefs
  gridApi.updateGridOptions({ columnDefs: [columnDef] });
  columnDefsList.value[index] = columnDef;
}

方法二：使用细粒度列更新（推荐） #

如果仅修改单行列定义，用updateColumnDefs只更新目标列，避免全量重绘：

function handleColumnMoved($event, index){
  const gridApi = agGridRefs.value[`${gridUUID.value}_${index}`].api;
  const columnDef = anotherFunction(...params);
  
  // 只更新目标列，而非替换整个columnDefs数组
  gridApi.updateColumnDefs([columnDef]);
  
  // 同步本地数据
  columnDefsList.value[index] = columnDef;
  
  // 保留列可见逻辑
  const columnsWithHeaderComponent = getColumnsWithHeaderComponent(gridApi.getColumnDefs());
  gridApi.ensureColumnVisible(columnsWithHeaderComponent, 'middle');
}

方法三：直接修改列定义并局部刷新 #

已知目标列colId时，直接修改列对象属性后局部刷新，对网格影响最小：

function handleColumnMoved($event, index){
  const gridApi = agGridRefs.value[`${gridUUID.value}_${index}`].api;
  const updatedColumnDef = anotherFunction(...params);
  const targetColumn = gridApi.getColumnDef(updatedColumnDef.colId);
  
  // 直接覆盖列定义属性
  Object.assign(targetColumn, updatedColumnDef);
  
  // 仅刷新头部和目标列单元格
  gridApi.refreshHeader();
  gridApi.refreshCells({ columns: [updatedColumnDef.colId] });
  
  // 同步本地数据
  columnDefsList.value[index] = updatedColumnDef;
  
  // 确保列可见
  const columnsWithHeaderComponent = getColumnsWithHeaderComponent(gridApi.getColumnDefs());
  gridApi.ensureColumnVisible(columnsWithHeaderComponent, 'middle');
}

关键说明 #

• updateGridOptions更新columnDefs会触发网格完全重初始化，这是导致滚动位置重置的核心原因。
• 优先选择细粒度更新方法，减少网格重绘范围，从根源避免滚动重置问题。
• 若必须替换整个columnDefs数组，保存并恢复滚动位置是最可靠的兼容方案。

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