Как добавить «редактируемую ячейку» для сгруппированных столбцов в Ant Design?

Question

Вот демонстрационный пример песочницы кода .

Несмотря на то, что я добавил ячейки столбца «Строительство» как editable : true Я не могу получить редактируемый параметр, как для name ячейки строки столбца.

Answer 1

Это связано с тем, что он сопоставляет столбцы для проверки наличия флага editable только в столбцах верхнего уровня, а не в массиве children, где хранятся данные для дочерних столбцов. Вам нужно изменить функцию map, чтобы проверить дочерние элементы и соответственно заменить их свойство onCell. Вы можете попробовать заменить:

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);

Вилка здесь .