ant design table项目中遇到的数据处理实例

前言

大家好 我是歌谣 今天需要进行一个数据处理的问题

原始数据到目标数据的处理过程 数据处理的过程就是逻辑推理的过程 类似一道数学题的解法 原始数据格式(本次以两组数据格式为例Rawdata)

[ { "id": 1047, "name": "README.md", "manufacture_id": 176, "materiel_id": 3555, "lead_time": null, "is_layer": 1, "cloth_width": null, "mark": null, "t_base_materiel": { "id": 3555, "code": "ML-QT0184", "name": "25D涤纶密可柔", "color": "黑色/8056" }, "cut_scheme_detail": [ { "id": 2667, "size_id": 135, "ratio": 13, "layer": 0, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2668, "size_id": 136, "ratio": 13, "layer": 0, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2669, "size_id": 137, "ratio": 13, "layer": 0, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2670, "size_id": 157, "ratio": 13, "layer": 0, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2671, "size_id": 277, "ratio": 13, "layer": 0, "t_base_size": { "id": 277, "name": "155" } } ] }, { "id": 1048, "name": "README.md", "manufacture_id": 176, "materiel_id": 3555, "lead_time": null, "is_layer": 1, "cloth_width": null, "mark": null, "t_base_materiel": { "id": 3555, "code": "ML-QT0184", "name": "25D涤纶密可柔", "color": "黑色/8056" }, "cut_scheme_detail": [ { "id": 2672, "size_id": 135, "ratio": 12, "layer": 0, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2673, "size_id": 136, "ratio": 12312, "layer": 0, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2674, "size_id": 137, "ratio": 1231, "layer": 0, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2675, "size_id": 157, "ratio": 12, "layer": 0, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2676, "size_id": 277, "ratio": 12, "layer": 0, "t_base_size": { "id": 277, "name": "155" } }, { "id": 2677, "size_id": 135, "ratio": 12123, "layer": 1, "t_base_size": { "id": 135, "name": "165" } }, { "id": 2678, "size_id": 136, "ratio": 12312, "layer": 1, "t_base_size": { "id": 136, "name": "170" } }, { "id": 2679, "size_id": 137, "ratio": 112, "layer": 1, "t_base_size": { "id": 137, "name": "175" } }, { "id": 2680, "size_id": 157, "ratio": 12312, "layer": 1, "t_base_size": { "id": 157, "name": "160" } }, { "id": 2681, "size_id": 277, "ratio": 1231, "layer": 1, "t_base_size": { "id": 277, "name": "155" } } ] } ]

原始column直接变量声明(RawColumns)

[{ title: "物料代码", dataIndex: "materielCode", key: "materielCode" }, { title: "物料名称", dataIndex: "materielName", key: "materielName" }, { title: "颜色", dataIndex: "color", key: "color", }, { title: "方案名称", dataIndex: "name", key: "name", }, { title: "是否拉高低层", dataIndex: "isLayer", key: "isLayer", }, { title: "门幅宽", dataIndex: "width", key: "width" }, ]

目标数据格式

1需要拆解为dataSource和dataColumn格式 目标的过程都是推理的过程(首先我们考虑不合并的表头状态 省略号表示带处理的动态尺码部分) 变化1:dataColumn数据格式变化

[{
            title: "物料代码",
            dataIndex: "materielCode",
            key: "materielCode"
        },
        {
            title: "物料名称",
            dataIndex: "materielName",
            key: "materielName"
        },
        {
            title: "颜色",
            dataIndex: "color",
            key: "color",
        },
        {
            title: "方案名称",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "是否拉高低层",
            dataIndex: "isLayer",
            key: "isLayer",
        },
        {
            title: "门幅宽",
            dataIndex: "width",
            key: "width"
        },
        ]

dataSource数据格式(最终数据格式)

[ { "155": 12, "160": 12, "165": 12, "170": 12312, "175": 1231, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "README.md", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 1231, "160": 12312, "165": 12123, "170": 12312, "175": 112, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "README.md", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]

需要做出动态表头拼接的数据格式(表头数据处理)

拿出所有的尺码 形成数组 处理过程

第一步 所有尺码形成数组 定义变量arr=[] Rawdata && Rawdata.map((item, index) => { item.cut_scheme_detail && item.cut_scheme_detail.map((item, index) => { arr.push(item.t_base_size.name) }) })

第二步 去重操作

const data = Array.from(new Set(arr))

第三步 拼接得到表头

data && data.map((item, index) => { RawColumns.push({ title: item, dataIndex: item, key: item }) })

结果:此时表头数据处理完成

[ { "title": "物料代码", "dataIndex": "materielCode", "key": "materielCode" }, { "title": "物料名称", "dataIndex": "materielName", "key": "materielName" }, { "title": "颜色", "dataIndex": "color", "key": "color" }, { "title": "方案名称", "dataIndex": "name", "key": "name" }, { "title": "是否拉高低层", "dataIndex": "isLayer", "key": "isLayer" }, { "title": "门幅宽", "dataIndex": "width", "key": "width" }, { "title": "165", "dataIndex": "165", "key": "165" }, { "title": "170", "dataIndex": "170", "key": "170" }, { "title": "175", "dataIndex": "175", "key": "175" }, { "title": "160", "dataIndex": "160", "key": "160" }, { "title": "155", "dataIndex": "155", "key": "155" } ]

第四步 紧接着就是datsource格式处理的过程

定义变量arr1=[] Rawdata && Rawdata.map((item, index) => { item.cut_scheme_detail.map((item1, index1) => { arr1.push( { materielCode: item.t_base_materiel.code, materielName: item.t_base_materiel.name, name: item.name, leadTime: item.leadTime, isLayer: item.is_layer == 1 ? "是" : "否", width: item.cloth_width, color: item.t_base_materiel.color, mark: item.mark, layer:item1.layer, [`${item1.t_base_size.name}`]: item1.ratio }) }) })

结果:arr1处理完成数据为

[ { "165": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "170": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "175": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "160": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "165": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "170": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "175": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "160": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 }, { "155": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]

这样的数据格式还是不满足条件 接着就是继续对arr1进行数据处理(typeof去判断对象的键是不是数字类型插入 arr2是一个对象 利用层数+对象属性名拼接形成对象) 定义一个对象arr2接收arr2={}

arr1&&arr1.map((item,index)=>{ Object.keys(item).map((key)=>{ if(typeof(key)=="number"){ arr2[`${key}-${item.layer}`]=item[key] }else{ arr2[`${key}-${item.layer}`]=item[key] } }) }) 结果格式处理为: 这样的数据格式还是不满足条件 但是距离我们的目标已经接近

{ "165-0": 1, "materielCode-0": "ML-QT0184", "materielName-0": "25D涤纶密可柔", "name-0": "package.json", "isLayer-0": "是", "width-0": null, "color-0": "黑色/8056", "mark-0": null, "layer-0": 0, "170-0": 1, "175-0": 1, "160-0": 1, "155-0": 1, "165-1": 2, "materielCode-1": "ML-QT0184", "materielName-1": "25D涤纶密可柔", "name-1": "package.json", "isLayer-1": "是", "width-1": null, "color-1": "黑色/8056", "mark-1": null, "layer-1": 1, "170-1": 2, "175-1": 2, "160-1": 2, "155-1": 2 }

最后最后 封装一个函数进行处理

export function myFunc(obj: any) { const newObj: any = {} for (const [key, value] of Object.entries(obj)) { const strList = key.split('-') const groupId = strList.pop() // 拿到最后一个"-"之后的字符 const keyName = strList.join('') // 最后一个"-"之前的所有字符再加起来(理论上如果只有一个"-"可以直接key.split('-')[0]和key.split('-')[1]) if (!newObj[groupId as string]) { newObj[groupId as string] = {} } newObj[groupId as string][keyName] = value } console.log(Object.values(newObj)) return Object.values(newObj) }

定义变量arr3=[] arr3= myFunc(arr2) 结果最后就是我们需要的datasource格式

[ { "155": 1, "160": 1, "165": 1, "170": 1, "175": 1, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 0 }, { "155": 2, "160": 2, "165": 2, "170": 2, "175": 2, "materielCode": "ML-QT0184", "materielName": "25D涤纶密可柔", "name": "package.json", "isLayer": "是", "width": null, "color": "黑色/8056", "mark": null, "layer": 1 } ]

3 最后就是我们的合并操作的 他是在render中进行的

export function filterNumData(obj: any, arr: any, record: any, index: number, flag: any) { let length: number = 0 if (arr.length > 0) { for (let i = index; i < arr.length; i++) { if (i === arr.length - 1 && arr.length != 1) { if (arr[i - 1][`${flag}`] === record[`${flag}`]) { length += 1 break } } else { if (arr[i][`${flag}`] === record[`${flag}`]) { length += 1 } else { break } } } } if (index == 0 || arr[index - 1][`${flag}`] != record[`${flag}`]) { // 匹配到相同数据的长度 obj.props.rowSpan = length; } else { // 如果上一行的数据与当前的数据相同，就将rowSpan变为0 obj.props.rowSpan = 0; } return obj }

只要在对应的表头中调用我们的filterNumber函数 就进行了合并操作

{ title: "颜色", dataIndex: "color", key: "color", render: (value: any, record: any, index: any) => { // 处理列，相同数据则合并 // 处理rowSpan const obj = { children: value, props: { rowSpan: 1 }, }; return filterNumData(obj, arr1, record, index, 'color') }, }, { title: "方案名称", dataIndex: "name", key: "name", render: (value: any, record: any, index: any) => { // 处理列，相同数据则合并 // 处理rowSpan const obj = { children: value, props: { rowSpan: 1 }, }; return filterNumData(obj, arr1, record, index, 'name') }, },

结语:任何处理的的过程就是规律寻找并接近答案的过程