如何在AG-Grid的cellRenderer中引用其他字段？

在AG-Grid的cellRenderer里访问当前行的其他字段很简单，核心是利用AG-Grid传递给cellRenderer的params对象，下面是几种常用的实现方式：

1. 直接通过params.data访问整行数据 #

这是最直接的方式，params.data包含了当前行的所有字段数据，你可以直接从中提取需要的其他字段值。

示例代码：

const columnDefs = [
  { field: 'name', headerName: '姓名' },
  { field: 'age', headerName: '年龄' },
  { 
    field: 'operation', 
    headerName: '操作',
    cellRenderer: (params) => {
      // 直接访问name和age字段
      return `<button>编辑 ${params.data.name}（${params.data.age}岁）</button>`;
    }
  }
];

2. 通过cellRendererParams传递指定字段 #

如果希望更清晰地定义需要传递给cellRenderer的字段，可以在columnDef中配置cellRendererParams，把需要的字段单独传进去。

示例代码：

// 自定义cellRenderer函数
const CustomCellRenderer = (params) => {
  // 从params中获取传递过来的name和age
  return `<div>用户：${params.name}，年龄：${params.age}</div>`;
};

const columnDefs = [
  { field: 'name', headerName: '姓名' },
  { field: 'age', headerName: '年龄' },
  { 
    field: 'info', 
    headerName: '用户信息',
    cellRenderer: CustomCellRenderer,
    cellRendererParams: {
      // 从当前行数据中提取需要的字段
      name: (params) => params.data.name,
      age: (params) => params.data.age
    }
  }
];

3. 框架类组件式cellRenderer（React/Vue场景） #

如果你在React或Vue中使用类组件作为cellRenderer，可以通过组件props获取整行数据：

React示例： #

class CustomRenderer extends React.Component {
  render() {
    const { data } = this.props;
    return <div>{data.name} - {data.department}</div>;
  }
}

const columnDefs = [
  { field: 'name', headerName: '姓名' },
  { field: 'department', headerName: '部门' },
  { 
    field: 'profile', 
    headerName: '个人信息',
    cellRendererFramework: CustomRenderer
  }
];

Vue示例： #

<template>
  <div>{{ params.data.name }} - {{ params.data.department }}</div>
</template>

<script>
export default {
  props: ['params']
};
</script>

// 在columnDefs中配置
const columnDefs = [
  { field: 'name', headerName: '姓名' },
  { field: 'department', headerName: '部门' },
  { 
    field: 'profile', 
    headerName: '个人信息',
    cellRendererFramework: CustomRenderer
  }
];

不管哪种方式，核心都是通过AG-Grid提供的params对象获取当前行的完整数据，进而访问其他字段。

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