如何在Ant Design中为分组列添加“可编辑单元格”？

Question

Here is the code sandbox demo。

即使我已将“建筑物”列单元格添加为editable : true 我无法像name列行单元格一样获得可编辑选项。

Answer 1

这是因为它在列上进行映射以仅在顶层列上检查editable标志，而不在存储子列数据的children数组中检查onCell标志。您需要更改map函数以检查子项并相应地替换其const columns = this.columns.map(col => { if (!col.editable) { return col; } return { ...col, onCell: record => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave: this.handleSave, }), }; }); 属性。您可以尝试更换：

const mapColumns = col => {
      if (!col.editable) {
        return col;
      }
      const newCol = {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave
        })
      };
      if (col.children) {
        newCol.children = col.children.map(mapColumns);
      }
      return newCol;
    };

    const columns = this.columns.map(mapColumns);

具有自己的功能，并将其递归应用于子级。

1

叉子here。