• 欢迎大家分享资料!前往留言板评论即可!

antd-Table注意事项

合宙 模组资料网 1年前 (2021-05-15) 212次浏览 已收录 0个评论 扫描二维码
使用antd中Table组件时,处理数据实现合并/编辑遇到的问题

antd版本 : v4
框架:antd pro/其他
适用人群:“涉世未深”的小伙伴,初次体验数据合并/拆分展示在对应表格,效果图如下:
antd-Table注意事项

下面就以我遇到的问题和数据作为一个small demo:
从后台拿到数据:data

[{
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规则,(我的给大家贴出来看一下,欢迎指教)

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进行进一步的处理(渲染和不渲染)


转载请注明原文链接:antd-Table注意事项
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址