根据表头和vaule进行数据匹配

Xiaochen1239

已于 2024-01-17 13:10:52 修改

阅读量395

点赞数 8

文章标签：服务器前端 linux

于 2023-12-22 11:24:29 首次发布

本文链接：https://blog.csdn.net/Xiaochen1239/article/details/135148796

版权

文章介绍了如何使用JavaScript处理动态生成的表头和嵌套数据结构，通过materdeepList函数将复杂的数据结构转换成易于匹配的格式，适用于数据表格的渲染和关联。

摘要由CSDN通过智能技术生成

表头：

数据：

返回的l列表中需要根据数据进行匹配，外层的指标name 是一开是就已经固定写死的可以直接让的数据进行关联直接数据进入直接进行匹配，

但子级的表头是动态生成的以及子级手动加的，那么和数据中的每一个item中的datalist是对应的，根据他们的的code找到对应的每一条的数据是方式那个下面的然后将数据给入对应匹配的

代码

//处理数据的
const materdeepList = (val: any, header: any) => {
    const list = []
    val.map((i: any) => {
        const obj = {}
        header.map((k: any) => {
            if (!k.kValue) obj[k.prop] = i[k.prop]
        })
        if (i.dataList && i.dataList.length) {
            i.dataList.map((k: any) => {
                header.map((z: any) => {
                    if (z.kValue === z.prop && z.prop === 'fraction') obj.fraction = k[z.prop]
                    if (z.kValue === z.prop && z.prop === 'value') obj.value = k[z.prop]
                })
            })
        }
        if (i.childList && i.childList.length) {
            const children = materdeepList(i.childList)
            if (children.length) obj.children = children
        }
        list.push(obj)
    })
    return list
}


//处理表头树形转平层
const leveling = (val: any) => {
    let result = []
    val.map((i: any) => {
        if (i.children && i.children.length) {
            const res = leveling(i.children)
            if (res.length) result = [...result, ...res]
        } else {
            result.push(i)
        }
    })
    return result
}

// 调用方法
 const { data } = await CollectDataTableListdataId({ assessmentPlanId: props.dataId, dataType: 2 })
    const header = leveling(tableHeader.value)
    tableData.value = materdeepList(data, header)

效果