hook项目实例之原始数据形成ant design table表格

前言

大家好 我是歌谣 由于项目最近使用的数据统一由postgrest定义 所以返回的数据只能是 各个表之间的层级关系

数据格式

[
  {
    "id": 1,
    "code": "JP",
    "name": "皮夹克",
    "t_base_style": [
      {
        "id": 66,
        "code": "JPAP12019",
        "name": "JPAP12019",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 430,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 66,
            "t_qc_reference_standard": [
              {
                "id": 27,
                "style_id": 66,
                "region_id": 430,
                "size_id": null,
                "standard": 1212
              }
            ]
          }
        ]
      },
      {
        "id": 44,
        "code": "JPQJ2422",
        "name": "JPQJ2422",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 11,
            "code": "内胆包边",
            "name": "内胆包边",
            "style_id": 44,
            "t_qc_reference_standard": []
          },
          {
            "id": 12,
            "code": "领面帽檐",
            "name": "领面帽檐",
            "style_id": 44,
            "t_qc_reference_standard": []
          },
          {
            "id": 13,
            "code": "门襟",
            "name": "门襟",
            "style_id": 44,
            "t_qc_reference_standard": []
          },
          {
            "id": 14,
            "code": "下摆",
            "name": "下摆",
            "style_id": 44,
            "t_qc_reference_standard": []
          },
          {
            "id": 15,
            "code": "帽子",
            "name": "帽子",
            "style_id": 44,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 97,
        "code": "JPLJ9513",
        "name": "JPLJ9513",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 431,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 97,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 112,
        "code": "JPTZS3149",
        "name": "JPTZS3149",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 9,
            "code": "口袋内包边",
            "name": "口袋内包边",
            "style_id": 112,
            "t_qc_reference_standard": []
          },
          {
            "id": 432,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 112,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 63,
        "code": "ZS3148",
        "name": "ZS3148",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 429,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 63,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 150,
        "code": "LJ9541",
        "name": "LJ9541",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 434,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 150,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 152,
        "code": "JPLJ1207",
        "name": "JPLJ1207",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 435,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 152,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 155,
        "code": "JP9562",
        "name": "JP9562",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 436,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 155,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 157,
        "code": "JPLJ9513/202组",
        "name": "JPLJ9513/202组",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 437,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 157,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 169,
        "code": "JPQJ2315",
        "name": "JPQJ2315",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 438,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 169,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 179,
        "code": "JPQJ2320",
        "name": "JPQJ2320",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 439,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 179,
            "t_qc_reference_standard": []
          }
        ]
      },
      {
        "id": 140,
        "code": "JP82131",
        "name": "JP82131",
        "category_id": 1,
        "t_base_part_region": [
          {
            "id": 433,
            "code": "下摆袖口",
            "name": "下摆袖口",
            "style_id": 140,
            "t_qc_reference_standard": []
          }
        ]
      }
    ]
  }
]

总共可以看出是三层结构 所以要处理成对应的表头和表数据格式

数据处理过程

let arr: any = []
                    response.data && response.data.map((item: any, index: number) => {
                        item.t_base_style && item.t_base_style.map((item1: any, index1: any) => {
                            item1.t_base_part_region && item1.t_base_part_region.map((item2: any, index2: any) => {
                                if(item2.t_qc_reference_standard.length==0){
                                    arr.push({
                                        part: item2.name,
                                        styleNumber: item1.name,
                                        product: item.name,
                                        styleId: item1.id,
                                        partId: item2.id,
                                        flag: item2.qc_flag,
 
                                    })
                                }else{
                                    item2.t_qc_reference_standard&&item2.t_qc_reference_standard.map((item3:any,index3:any)=>{
                                        arr.push({
                                            part: item2.name,
                                            styleNumber: item1.name,
                                            product: item.name,
                                            styleId: item1.id,
                                            partId: item2.id,
                                            flag: item2.qc_flag,
                                            flagId:item3.id
                                        })
                                    })
                                }  
                            })
                        })

操作要点1 形成column和datasource格式

<BasicTable data={menuData} onChange={onTableChange} loading={loading}>
                <Table.Column<Menu> title="品类" dataIndex="product" align="center"></Table.Column>
                <Table.Column<Menu> title="款式" dataIndex="styleNumber" align="center"></Table.Column>
                <Table.Column<Menu> title="部件" dataIndex="part" align="center"></Table.Column>
                <Table.Column<Menu> title="是否维护" dataIndex="flag" align="center" render={(text, record, index) => (
                    <span>{text ? "已维护" : "未维护"}</span>
                )}></Table.Column>
                <Table.Column<Menu>
                    title="操作"
                    align="center"
                    render={(text, record, index) => (
                        <MenuButton index={index} record={record} onButtonClick={onButtonClick} />
                    )}
                ></Table.Column>
            </BasicTable>

操作要点2 查询数据

关键要有两份数据

setMenuData({
                        list: arr, page: {
                            dataTotal: arr.length,
                            pageTotal: arr.length,
                            size: response.size,
                            page: response.current
                        }
                    });
                    setMenuDataCopy({
                        list: arr, page: {
                            dataTotal: arr.length,
                            pageTotal: arr.length,
                            size: response.size,
                            page: response.current
                        }
                    });

重置和过滤逻辑

const onSearch =
        (params: any) => {
            if (Object.keys(params).length > 0) {
                let arr: any = []
                var data: any = JSON.parse(JSON.stringify(menuDataCopy))
                console.log(data, "datadata")
                arr = data.list.filter((item: any, index: any) => {
                    return item.styleNumber == params.styleNumber
                })
                console.log(arr)
                setMenuData({
                    list: arr, page: {
                        dataTotal: arr.length,
                        pageTotal: arr.length,
                    }
                });
            } else {
                setMenuData(menuDataCopy)
            }
        }

结果展示

在这里插入图片描述

总结

以上就是对真实项目数据处理的讲解 我是歌谣 感谢你的阅读 想加入前端巅峰人才交流群关注我

posted @   前端导师歌谣  阅读(18)  评论(0)  编辑  收藏  举报  
相关博文：
· ant design table项目中遇到的数据处理实例
· 前端hook项目moblie总结笔记-ant design动态数据赋值
· 商品热销排行
· HM-RocketMQ2.4【案例环境搭建】
· springboot电脑商城项目 11 热销商品展示 12 商品详情界面
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示