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: '最長(zhǎng)為 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧
這篇文章主要介紹了使用eslint和githooks統(tǒng)一前端風(fēng)格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JS創(chuàng)建Tag標(biāo)簽的方法,結(jié)合具體實(shí)例形式分析了javascript動(dòng)態(tài)操作頁(yè)面HTML元素實(shí)現(xiàn)tag標(biāo)簽功能的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了js如何實(shí)現(xiàn)日歷，幫助大家完成需求，提高對(duì)js的理解，感興趣的朋友可以了解下2020-11-11
js實(shí)現(xiàn)兼容IE6與IE7的DIV高度
兼容IE6與IE7的DIV高度的js代碼，2010-05-05
javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序詳解
在本篇文章里小編給大家整理是一篇關(guān)于javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-10-10 
JS設(shè)計(jì)模式之狀態(tài)模式的用法使用方法
JavaScript狀態(tài)模式是一種行為型設(shè)計(jì)模式,核心是對(duì)象在其內(nèi)部狀態(tài)改變時(shí)改變其行為,狀態(tài)模式將對(duì)象的行為封裝到不同的狀態(tài)類中,使得對(duì)象在不同狀態(tài)下可以選擇不同的行為,本文給大家詳細(xì)的介紹一下狀態(tài)設(shè)計(jì)模式在Js中的使用,需要的朋友可以參考下
2023-08-08 
設(shè)為首頁(yè)和收藏的Javascript代碼(親測(cè)兼容IE,Firefox,chrome等瀏覽器)
這篇文章主要介紹了設(shè)為首頁(yè)和收藏的Javascript代碼(親測(cè)兼容IE,Firefox,chrome等瀏覽器)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11 
這篇文章主要介紹了微信小程序-form表單提交，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04 
jquery插件jquery.confirm彈出確認(rèn)消息
這篇文章介紹了插件jquery.confirm彈出確認(rèn)消息的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2015-12-12