今天接到一个需求:如图:
左侧的类目自成一块。右侧定额编号和定额名称依此展示。(本例基于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来处理。但是发现确实不好处理。而通过改造数据,在源头上处理好逻辑以后,剩下的交给框架去渲染的确是一个正确的思路