Ag Grid Vue2固定底行数据显示异常求助（嵌套字段场景）

问题背景 #

使用Ag Grid Vue 2的pinnedBottomRowData或gridApi.setPinnedBottomRowData配置固定底行时，底行可见但无数据。列定义采用嵌套字段的点符号（如field: "supplier.number"），固定行数据使用平级字段名（如supplierNumber）导致无法匹配，添加colId未生效；修改字段名放弃嵌套结构虽能解决，但无法修改外部JSON数据源，也不想转换JSON生成新对象。

解决方案 #

以下两种方案无需修改原JSON即可解决问题：

方案一：生成与列字段路径匹配的嵌套固定行数据 #

直接构造与列field路径一致的嵌套结构固定行数据，让Ag Grid自动匹配渲染：

修改后的createData函数：

createData(prefix, list) {
  let totalDesc = 0;
  let totalNumber = 0;
  let totalBudget = 0;

  // 遍历原数据计算总和，兼容可能的空值
  list.forEach(line => {
    totalDesc += line.supplier?.desc || 0;
    totalNumber += line.supplier?.number || 0;
    totalBudget += line.year2024?.budget || 0;
  });

  const result = [
    {
      supplier: {
        desc: `${prefix} ${totalDesc}`,
        number: `${prefix} ${totalNumber}`
      },
      year2024: {
        budget: `${prefix} ${totalBudget}`
      }
    }
  ];

  this.gridApi.setPinnedBottomRowData(result);
}

方案二：通过valueGetter适配双数据源结构 #

给列定义添加valueGetter，让列同时支持读取原数据的嵌套字段和固定行的平级字段：

修改后的列定义：

columnDefs: [
  {
    headerName: "Information",
    children: [
      {
        headerName: "Description",
        colId: 'supplierDesc',
        field: "supplier.desc",
        valueGetter: params => params.data.supplierDesc ?? params.data.supplier?.desc
      },
      {
        headerName: "number",
        colId: "supplierNumber",
        field: "supplier.number",
        valueGetter: params => params.data.supplierNumber ?? params.data.supplier?.number
      },
    ],
  },
  {
    headerName: "Header2",
    children: [
      {
        headerName: "Supplier Budget",
        colId:"supplierBudget",
        field: "year2024.budget",
        cellRenderer: (params) => this.currencyFormatter(params.value, "€"),
        valueGetter: params => params.data.supplierBudget ?? params.data.year2024?.budget
      },
    ],
  },
]

此方案下原createData函数无需修改，固定行的平级字段会被valueGetter优先读取。

方案对比 #

• 方案一：逻辑简洁，完全贴合Ag Grid原生字段匹配规则，无需修改列定义；
• 方案二：保留现有固定行数据结构，适合需要复用createData逻辑的场景。

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