【React工作记录一百一十七】hook项目实例之原始数据形成ant design table表格
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
前言
大家好 我是歌谣 由于项目最近使用的数据统一由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)
}
}结果展示
总结
以上就是对真实项目数据处理的讲解 我是歌谣 感谢你的阅读
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |