一、BUG效果如下

点击后报错:

二、复现代码

import { EditableProTable } from '@ant-design/pro-table';
import React, { useState } from 'react';

const defaultData: any = new Array(3).fill(1).map((_, index) => {
  return {
    id: (Date.now()   index).toString(),
    title: `活动名称${index}`,
    decs: '这个活动真好玩',
    state: 'open',
    created_at: '2020-05-26T09:42:56Z',
  };
});

export default () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id),
  );
  const [dataSource, setDataSource] = useState<any[]>(() => defaultData);

  const columns: any = [
    {
      title: '活动名称',
      dataIndex: 'title',
      width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '此项是必填项',
          },
          {
            message: '必须包含数字',
            pattern: /[0-9]/,
          },
          {
            max: 16,
            whitespace: true,
            message: '最长为 16 位',
          },
          {
            min: 6,
            whitespace: true,
            message: '最小为 6 位',
          },
        ],
      },
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      valueType: 'select',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
        },
      },
    },
    {
      title: '描述',
      dataIndex: 'decs',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 250,
      render: () => {
        return null;
      },
    },
  ];

  return (
    <>
      <EditableProTable<any>
        headerTitle="可编辑表格"
        columns={columns}
        rowKey="id"
        scroll={{
          x: 960,
        }}
        value={dataSource}
        onChange={setDataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          position: 'bottom',
          record: () => ({
            id: Date.now(),
          }),
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete,
            <EditableProTable.RecordCreator
              parentKey={row.id}
              newRecordType='dataSource'
              position='bottom'
              record={{
                id: Date.now(),
              }}
            >
              <a>增加子行</a>
            </EditableProTable.RecordCreator>];
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onChange: setEditableRowKeys,
        }}
      />
    </>
  );
};

三、解决方案

自己写一个递归的方法将子行追加到选中行下即可,下面展示的是我项目中的代码,不能复制直接用,但思路是一样的。
首先在actionRender中自定义“增加子行”的操作按钮,其中addChildToSource为增加逻辑方法:

       actionRender: (row, _, dom) => [
            <a
              key="addChild"
              onClick={() => addChildToSource(row.id, type)}
            >
              增加子行
            </a>
          ],

addChildToSource代码如下:

  //增加子行
  const addChildToSource = (rowKey: any, type: string) => {
    let childRowKey = Date.now(); //rowkey的id不能重复,不然会回填异常
    editableKeys[type].push(childRowKey);
    let source = formRef.current.getFieldValue(`${type}_source`); //type_source为表格定义的formItem的name
    source = addChildToSourceFunc(source, rowKey, childRowKey, type);
    const _dict = {};
    _dict[`${type}_source`] = source;
    formRef.current.setFieldsValue(_dict);
    setEditableKeys({ ...editableKeys });
  };

上述方法调用的addChildToSourceFunc代码如下:

  //删除参数edit及子级edit
   const addChildToSourceFunc = (
    source: any,
    rowKey: any,
    childRowKey: any,
    type: string,
    childName: any = null,
  ) => {
    for (var i = 0; i < source.length; i  ) {
      const sourceItem = source[i];
      if (sourceItem.id === rowKey) {
        if (!sourceItem.children) {
          sourceItem.children = [];
        }
        sourceItem.children.push({ id: childRowKey, required: true, param_type: 'string', name: childName });
        break;
      } else if (sourceItem.children) {
        addChildToSourceFunc(sourceItem.children, rowKey, childRowKey, type, childName,);
      }
    }
    return source;
  };

成功解决了该问题,解决后的效果:

到此这篇关于Antd ProComponents中的EditableProTable无法在子行继续新增子行的解决方案的文章就介绍到这了,更多相关Antd ProComponents子行内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Antd ProComponents中的EditableProTable无法在子行继续新增子行的解决方案的更多相关文章

  1. antd项目实现彩蛋效果的详细代码

    这篇文章主要介绍了antd项目如何实现彩蛋效果,首先在components目录下创建Transform目录,包括index.css、index.js,index.js是主要的逻辑代码,下面对代码进行分析,需要的朋友可以参考下

  2. 手把手教你从零开始react+antd搭建项目

    本文将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. 基于 antd pro 的短信验证码登录功能(流程分析)

    这篇文章主要介绍了基于 antd pro 的短信验证码登录功能(流程分析),本文通过实例代码流程分析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. react配合antd组件实现的管理系统示例代码

    这篇文章主要介绍了react配合antd组件实现的管理系统示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. React+Antd 实现可增删改表格的示例

    这篇文章主要介绍了React+Antd实现可增删改表格的示例,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下

  6. 快速修改antd vue单个组件的默认样式

    这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式,具有很好的参考价值,希望对大家有所帮助。

  7. 在react项目中使用antd的form组件,动态设置input框的值

    这篇文章主要介绍了在react项目中使用antd的form组件,动态设置input框的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. 解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

    这篇文章主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. webpack+react+antd脚手架优化的方法

    本篇文章主要介绍了webpack+react+antd脚手架优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部