使用antd中Table组件时，处理数据实现合并/编辑遇到的问题
antd版本 : v4
框架：antd pro/其他
适用人群：“涉世未深”的小伙伴，初次体验数据合并/拆分展示在对应表格，效果图如下：
下面就以我遇到的问题和数据作为一个small demo:
从后台拿到数据：data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| [{
amount_payed: 0
amount_payed_to_check: 0
commercial_user_name: "xc"
creator_id: 2
creator_name: "xc"
ctime: "2020-08-26 15:16:04"
customer_company: ""
customer_id: 15859
customer_name: "陆华正"
deliveries: []
expected_time: "2020-08-27 08:00:00"
id: 85
info: ""
invoices: []
items: [{order_item_id: 118, product_id: 941, product_name: "A288S模块中性标签", amount: 1, amount_applied: 0,…}]
0: {order_item_id: 118, product_id: 941, product_name: "A288S模块中性标签", amount: 1, amount_applied: 0,…}
amount: 1
amount_applied: 0
amount_delivered: 0
amount_prepared: 0
amount_refunded: 0
firmware: "a"
is_card: 0
label: "d"
order_item_id: 118
price: 14.5
product_id: 941
product_name: "A288S模块中性标签"
remain: 877
software: "AT版本"
standard_price: 14.5
order_type: 1
payee: ""
payment_status: 0
payment_type: 0
payments: []
phone: "18078159071"
prepare_status: 0
review_history: []
review_status: 1
sales_user_name: "Luat"
sn: "DD00000085"
status: 0
submitter_name: "xc"
total_price: 0.14
warehouse: "深圳小件库"
}]
|
步骤：
①此时，你要将其处理成两条数据（相信各位小伙伴都会处理：各种循环…….此处省略一百万个字母）
②拿到处理完成的数据（建议保证数据的统一性，仅仅是建议，全凭自己哦:smirk:）
③构建render规则，（我的给大家贴出来看一下，欢迎指教）
1
2
3
4
5
6
7
8
9
10
11
12
13
| const renderContent = (value, record, index) => {
const obj = {
children: value,
props: {},
};
if (record.items && record.items.length > 1) {
obj.props.rowSpan = record.items.length;
}
if (!record.items) {
obj.props.rowSpan = 0;
}
return obj;
};
|
到此就完成了。。。
问题分析：
1、数据拆分，构建新的数据格式（此时建议保留源数据，以防止源数据变动，导致显示内容不准确）
2、数组中对应的元素（对象），建议保证格式相同，务必别“偷工减料”（可能导致问题：数据格式不统一，需求发生改动，对表格进行编辑功能开发会存在未知问题）
3、列进行render渲染时，清楚了解所需的数据结构，利用rowSpan/colSpan进行进一步的处理（渲染和不渲染）
