如何自定义ag-grid中数组列元素的分隔符

直接使用cellRenderer自定义渲染逻辑即可，完全不会修改原始数组值，过滤功能依然基于数组类型正常工作：

在列配置中添加cellRenderer函数，将数组用, （逗号加空格）拼接后返回，同时处理空值避免报错：

const columnDefs = [
  {
    headerName: '目标列名',
    field: 'arrayField',
    cellRenderer: (params) => {
      return params.value?.join(', ') || '';
    }
  }
  // 其他列配置
];

补充说明 #

• 关于valueFormatter：其实它同样不会改变原始列值，仅作用于显示层，如果你之前误解了它的作用，也可以用valueFormatter实现：

  valueFormatter: (params) => params.value?.join(', ') || ''
  

• 无论用哪种方式，原始的数组数据都会被完整保留，ag-grid的过滤功能依然会基于数组类型进行处理，不会受显示格式影响。

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