Vue Ag-Grid自定义Row ID不生效：getRowId回调未触发求助

问题 #

使用Vue 2.6.11 + Ag-Grid Vue 26.1.0，尝试通过自定义Row ID避免行重渲染，但getRowId回调未触发，行ID仍为0、1、2...自动分配值，且不清楚该回调的触发时机。

解决方案 #

核心问题原因 #

getRowId需要在网格初始化阶段就传入，你在created钩子中才赋值getRowId，此时网格已开始初始化，无法读取到该回调函数，导致默认自动ID生效。

修复步骤 #

1. 提前定义getRowId函数：直接在组件methods中声明（符合Vue组件规范），确保网格初始化时能获取到。
2. 明确触发时机：getRowId仅在行数据首次加载/新增行时触发，网格用它生成行节点唯一ID；后续更新行数据时，只要ID匹配就不会重渲染整行。

修改后的代码 #

模板部分（无需改动）

<template>
  <div>
      <template>
        <ag-grid-vue
          style="height: calc(100vh - 148px)"
          class="ag-theme-balham"
          :columnDefs="columnDefs"
          @grid-ready="onGridReady"
          :rowData="rowData"
          :getRowId="getRowId"
        ></ag-grid-vue>
      </template>
  </div>
</template>

脚本部分

<script>
export default {
  name: "My-Component",
  data() {
    return {
      columnDefs: [
        { headerName: "Row ID", valueGetter: "node.id" },
        { field: "id" },
        { field: "make" },
        { field: "model" },
        { field: "price" },
      ],
      gridApi: null,
      columnApi: null,
      rowData: null,
    };
  },
  created() {
    this.rowData = [
      { id: "c1", make: "Lima", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ];
  },
  methods: {
    getRowId(params) {
      return params?.data.id;
    },
    onGridReady(params) {
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
    }
  }
};
</script>

验证方法 #

可在getRowId中添加日志，确认是否触发：

getRowId(params) {
  console.log("getRowId触发，行ID：", params.data.id);
  return params?.data.id;
}

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