Angular Grid Ag-Grid：如何仅让新增行的所有列动态可编辑

你找对方向啦——AG-Grid的editable属性完全支持传入函数，这正是解决你问题的最优方案，根本不需要每次新增行都重新修改columnDefs。

核心思路 #

editable的函数会接收一个params参数，里面包含当前行的data数据。我们可以在这个函数里做两层判断：

1. 如果当前行是新增行（isChanged === "inserted"），直接返回true，让该行所有列都可编辑
2. 否则，沿用你原来的逻辑，根据列名判断是否可编辑

具体实现 #

首先，重构你的可编辑判断函数，让它支持行级动态判断：

isColumnEditable(params: { data: any; colDef: any }) {
  // 优先判断是否是新增行
  if (params.data.isChanged === "inserted") {
    return true;
  }

  // 原有逻辑：根据列名判断是否可编辑
  const columnName = params.colDef.headerName; // 这里可以根据你的tableColumns字段对应关系调整，比如用field也可以
  let editable = false;
  this.configData.some((el) => {
    if (columnName === el.key.columnName) {
      editable = el.editable === "Y";
      return true; // 找到匹配项后终止循环，提升性能
    }
    return false;
  });
  return editable;
}

然后在生成columnDefs的时候，把editable绑定到这个函数：

// 假设你是通过tableColumns生成columnDefs
this.columnDefs = this.tableColumns.map(column => ({
  headerName: column.headerName,
  field: column.headerName, // 对应你的数据字段名，按需调整
  editable: this.isColumnEditable.bind(this), // 绑定this，确保能访问到组件内的configData
  // 其他列属性（比如width、sortable等）...
}));

简化新增行逻辑 #

现在你不需要在insertNewRow里修改columnDefs了，直接新增行就行——AG-Grid会自动调用isColumnEditable函数判断每一列的可编辑状态：

insertNewRow(){
  const newItem = this.createNewRowData();
  this.gridOptions.api.updateRowData({add: [newItem]});
  // 这里不需要再处理columnDefs了！
}

createNewRowData(){
  const newData: any = {};
  this.tableColumns.forEach(item => {
    if (item.headerName === "isChanged") {
      newData["isChanged"] = "inserted";
    } else {
      newData[item.headerName] = "";
    }
  });
  return newData;
}

为什么这比修改columnDefs更好？ #

• 性能更优：不需要每次新增行都重新渲染列定义
• 逻辑统一：所有行的可编辑判断都集中在一个函数里，后续维护更方便
• 自动生效：无论是现有行还是新增行，AG-Grid都会实时判断可编辑状态

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