如何在AG Grid单元格中优雅显示数组数据？

AI 小北

2026-6-12

AG Grid 优雅显示数组值并自动适配行高

不需要手动计算行高，利用AG Grid自带的autoHeight属性就能实现自动适配，以下是两种常用方案：

方案一：基础HTML渲染 + autoHeight

直接在cellRenderer里用HTML元素包裹数组元素，开启列的autoHeight，AG Grid会自动根据内容高度调整行高：

// 列定义
const columnDefs = [
  {
    headerName: '数组内容',
    field: 'my_values',
    autoHeight: true, // 关键：开启自动行高
    cellRenderer: params => {
      // 用div包裹每个数组元素，确保内容自然换行
      return params.value?.map(item => `<div class="array-item">${item}</div>`).join('') || '';
    },
    cellClass: 'array-cell' // 可选：添加样式优化间距
  }
];

// 可选CSS样式
/*
.array-cell {
  padding: 6px 8px;
}
.array-item {
  margin-bottom: 4px;
}
.array-item:last-child {
  margin-bottom: 0;
}
*/

方案二：框架组件渲染（以React为例）

如果用React开发，用组件作为cellRenderer，配合autoHeight同样能自动适配：

// 自定义单元格组件
const ArrayCell = ({ value }) => {
  if (!value?.length) return null;
  return (
    <div style={{ padding: '6px 8px' }}>
      {value.map((item, idx) => (
        <div key={idx} style={{ marginBottom: idx === value.length -1 ? 0 : '4px' }}>
          {item}
        </div>
      ))}
    </div>
  );
};

// 列定义
const columnDefs = [
  {
    headerName: '数组内容',
    field: 'my_values',
    autoHeight: true,
    cellRendererFramework: ArrayCell // 使用React组件作为渲染器
  }
];