今天接到一个需求：如图：
左侧的类目自称一块。右侧定额编号和定额名称依此展示。（本例基于react 、antd）
这个表格的诡异性就在明明是一个嵌套结构却采用平铺展示的方式，而且平铺的时候类目明明作为一栏却只能展示第一个。
先看看后端返回的数据结构：
"propertyQuotaList": [{
"keyName": "瓷砖",
"quotaList": [{
"id": 15,
"categoryId": 5,
"name": "Daniel Walker",
"quotaNum": "220000198607142169",
}, {
"id": 16,
"categoryId": 5,
"name": "Richard Johnson",
"quotaNum": "420000197410194857",
}, {
"id": 17,
"categoryId": 5,
"name": "Sharon Robinson",
"quotaNum": "51000019720210920X",
}]
}, {
"keyName": "真皮沙发",
"quotaList": [{
"id": 1,
"categoryId": 6,
"name": "定额名称",
"quotaNum": "12345678",
}, {
"id": 19,
"categoryId": 6,
"name": "23432",
"quotaNum": "234234234",
}, {
"id": 20,
"categoryId": 6,
"name": "测试定额1",
"quotaNum": "123213123",
}, {
"id": 21,
"categoryId": 6,
"name": "定额测试2",
"quotaNum": "213123123",
}, {
"id": 22,
"categoryId": 6,
"name": "ghl测试123",
}]
}]好家伙。数组里的json居然是这副德行？
最开始打算采用antd的table来处理后来发现还是自定义模拟一个更好控制。
关键的问题：
1 数据肯定是要遍历出来的，那数据的字段肯定是要保持统一，也就是说keyName和quotaList必须要在包含在一个数组里才能正常遍历展示，那如何合并到一起？
2 如何处理左侧的keyName只展示第一个的问题，让他们看起来整体就是一个嵌套层级的关系？
我们先做第一步：keyName和quotaList糅合到一起：
思路就是遍历quotaList手动给添加keyName：
let list=(props&&props.list)||[];
console.log("list:",list) //原始的数据
list.forEach(item=>{
item?.quotaList.forEach((k,index)=>{
list2.push({...k,keyName:index==0?item.keyName:""})
})
})
console.log("list2:",list2) //改造以后的数据
经过改造。我们的list2实际上就成了如下数组。keyName和quotaList里的数据成功的被糅合在一起?
?这时候我们发现，渲染的效果是这样的：
?到这里我们走完了第一步。但是第二步我们怎么做呢？
这里的思想就是：数据依然采用这样的数据。我们只需要把每一行里第一行的keyName设置为正常的keyName，其他的则全部设置为空即可。我们还是从改造数据的思路上走。在糅合keyName和quotaList的时候把index==0的那个keyName设置为正常的keyName，其他的全部为“”“
let list=(props&&props.list)||[];
console.log("list:",list)
list.forEach(item=>{
item?.quotaList.forEach((k,index)=>{
list2.push({...k,keyName:index==0?item.keyName:""}) //注意这里的判断
})
})
?最后我们会发现表格就成了我们想要的样子。
?
最开始思维进入了一个误区：打算通过css3选择器进行判断设置相应的item的opactiy：0来处理。但是发现确实不好处理。而通过改造数据，在源头上处理好逻辑以后，剩下的交给框架去渲染的确是一个正确的思路