欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案

 更新時(shí)間：2022年08月02日 10:18:19   作者：曲鳥  
這篇文章主要介紹了Antd?ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案,本文通過復(fù)現(xiàn)代碼給大家詳細(xì)講解，需要的朋友可以參考下

一、BUG效果如下

點(diǎn)擊后報(bào)錯(cuò)：

二、復(fù)現(xiàn)代碼

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: `活動(dòng)名稱${index}`,
    decs: '這個(gè)活動(dòng)真好玩',
    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: '活動(dòng)名稱',
      dataIndex: 'title',
      width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '此項(xiàng)是必填項(xiàng)',
          },
          {
            message: '必須包含數(shù)字',
            pattern: /[0-9]/,
          },
          {
            max: 16,
            whitespace: true,
            message: '最長為 16 位',
          },
          {
            min: 6,
            whitespace: true,
            message: '最小為 6 位',
          },
        ],
      },
    },
    {
      title: '狀態(tài)',
      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,
        }}
      />
    </>
  );
};

三、解決方案

自己寫一個(gè)遞歸的方法將子行追加到選中行下即可，下面展示的是我項(xiàng)目中的代碼，不能復(fù)制直接用，但思路是一樣的。
首先在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不能重復(fù)，不然會(huì)回填異常
    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 });
  };

上述方法調(diào)用的addChildToSourceFunc代碼如下：

  //刪除參數(shù)edit及子級(jí)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;
  };

成功解決了該問題，解決后的效果：

到此這篇關(guān)于Antd ProComponents中的EditableProTable無法在子行繼續(xù)新增子行的解決方案的文章就介紹到這了,更多相關(guān)Antd ProComponents子行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • javascript sort()對數(shù)組中的元素進(jìn)行排序詳解

    javascript sort()對數(shù)組中的元素進(jìn)行排序詳解

    在本篇文章里小編給大家整理是一篇關(guān)于javascript sort()對數(shù)組中的元素進(jìn)行排序的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
    2019-10-10
  • JS設(shè)計(jì)模式之狀態(tài)模式的用法使用方法

    JS設(shè)計(jì)模式之狀態(tài)模式的用法使用方法

    JavaScript狀態(tài)模式是一種行為型設(shè)計(jì)模式,核心是對象在其內(nèi)部狀態(tài)改變時(shí)改變其行為,狀態(tài)模式將對象的行為封裝到不同的狀態(tài)類中,使得對象在不同狀態(tài)下可以選擇不同的行為,本文給大家詳細(xì)的介紹一下狀態(tài)設(shè)計(jì)模式在Js中的使用,需要的朋友可以參考下
    2023-08-08
  • 設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)

    設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)

    這篇文章主要介紹了設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • 微信小程序-form表單提交代碼實(shí)例

    微信小程序-form表單提交代碼實(shí)例

    這篇文章主要介紹了微信小程序-form表單提交，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • jquery插件jquery.confirm彈出確認(rèn)消息

    jquery插件jquery.confirm彈出確認(rèn)消息

    這篇文章介紹了插件jquery.confirm彈出確認(rèn)消息的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
    2015-12-12

    • 最新評論