Antd 表格如何设置表头分组的可编辑行?

表格设置了表头分组后 使用可编辑行无效

image.png

示例代码

阅读 166
评论
    1 个回答
    • 2.1k

    你需要通过 onCell 方法修改 childrencloumn 的属性。

        const columns = this.columns.map(col => {
          if (!col.editable) {
            return col;
          }
    
          if (col.children) {
            return {
              ...col,
              children: [
                {
                  ...col.children[0],
                  onCell: record => {
                    return {
                      record,
                      inputType: "text",
                      dataIndex: col.children[0].dataIndex,
                      title: col.children[0].title,
                      editing: this.isEditing(record)
                    };
                  }
                },
                {
                  ...col.children[1],
                  onCell: record => {
                    return {
                      record,
                      inputType: "text",
                      dataIndex: col.children[0].dataIndex,
                      title: col.children[0].title,
                      editing: this.isEditing(record)
                    };
                  }
                }
              ]
            };
          } else {
            return {
              ...col,
              onCell: record => {
                return {
                  record,
                  inputType: col.dataIndex === "age" ? "number" : "text",
                  dataIndex: col.dataIndex,
                  title: col.title,
                  editing: this.isEditing(record)
                };
              }
            };
          }
        });

    点击查看示例

      撰写回答

      登录后参与交流、获取后续更新提醒