React中如何在ag-grid的第三索引位置动态添加列？

要在AG Grid的第三列位置（注意数组索引从0开始，对应索引值为2）动态添加列，不用push（仅能追加到末尾），直接用数组的splice方法即可指定插入位置。

核心修改逻辑 #

数组splice方法语法：array.splice(insertIndex, deleteCount, itemToInsert)

• insertIndex：目标插入位置的索引（第三列填2）
• deleteCount：设为0，表示不删除原有元素
• itemToInsert：要添加的AG Grid列配置对象

修改后的代码示例 #

let headers = [...this.state.empHeaders]; // 复制原状态数组，避免直接修改state
empList.org.forEach(item => {
  if(item.check === 'xyz'){
    // 在索引2的位置（第三列）插入新列
    headers.splice(2, 0, { 
      field:'name', 
      headerName:'NAME',
      cellRenderer:'empName'
    });
  }
})
// 更新state触发AG Grid重新渲染列
this.setState({ empHeaders: headers });

关键注意事项 #

• 必须先复制原状态数组（用扩展运算符[...arr]或slice()），遵循React状态不可变原则，不能直接修改this.state中的数据
• 索引对应要准确：第一列索引0，第二列1，第三列2
• 修改完成后一定要调用setState更新状态，AG Grid才会重新渲染列配置

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