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

发布于 2022-09-12 03:30:32 字数 197 浏览 17 评论 0

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

image.png

示例代码

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

初熏 2022-09-19 03:30:32

你需要通过 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)
            };
          }
        };
      }
    });

点击查看示例

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文