需求是这样子的：
- 甩了一个文档过来，为了后期可以修改数据，需要将表格实现在页面上
- 后端的数据是这样式的：
{
"data": {
"table": {
"headers": [
"收费项目",
"计算单位",
"收费标准",
"运行时间"
],
"rows": [
[
"起步价",
"2公里以内",
"5元",
"0-24时（全天）"
],
[
"2-10公里",
"每公里",
"2.2元",
"白天6:00-21:00"
],
[
"2-10公里",
"每公里",
"2.5元",
"晚上21:00-次日6:00"
],
[
"10-20公里",
"每公里",
"3元",
"0-24时（全天）"
],
[
"20公里以上",
"每公里",
"由乘客和司机协商确定",
"0-24时（全天）"
],
[
"候时费用",
"每分钟",
"0.5元",
"0-24时（全天）"
]
],
"title": "出租车运价"
},
}
}
- 一行一行渲染过去并没有什么难度，直接数据v-for圈过去就好了，效果大概是这样
- 但是这样和正常的表格逻辑并不一样，一样的东西，应该合并起来呀！
- 不啰嗦了，接下来是我的解决方法
解决方法
js 数据
- 思路：（如果样式不一样的建议看）
- 将收费项目看成一项，一共就有五项，因此我们要拿到出一个长度为五的数组去遍历
处理：现在的数组是有六项，因为中间有俩个相同（2-10公里），那我们来合并一下，将除了收费项目（第一项），其他的都合并在一起；然后你可以观察到，刚好要合并的这俩行中的计算单位，也是一样的，是不是也可以合并？
脑子里浅画一下，图长这样：
问题来了，现在的数据长这样，要怎么合并？
arr = [
[ "2-10公里", "每公里", "2.2元", "白天6:00-21:00" ],
[ "2-10公里", "每公里", "2.5元", "晚上21:00-次日6:00"],
]
观察一下上面的图，它是不是有点像 树？（想想想清楚，接下来要开始大乱斗了）
2. 现在可以明确，要生成五个项的数组，每项涵盖一个收费项目，每个收费项目中对应（一/多个）计算单位，每个计算单位对应（一/多个）收费标准，每个收费标准对应（一/多个）运行时间
转为数据， 将当前的六项的每一项内容包含了 name：收费项目（第一项）和content ；content 又包含了name:'计算单位'和content
以此类推
let arr = [];
list.forEach((item) => {
let obj = {
name:item[0],
content:[{
name:item[1],
content:[{
name:item[2],
content: [{
name:item[3]
}]
}]
}]
}
arr.push(obj)
});
然后开始合并：
let arrContent = [];//合并
for(let i = 0;i < arr.length; i++){
if(arr[i].name == arr[i-1]?.name){//name相同，合并content
if(arr[i].content[0].name == arr[i-1].content[0].name){//第二级的name也相同，合并content
if(arr[i].content[0].content[0].name == arr[i-1].content[0].content[0].name){//第三级的name也相同，合并content
arrContent[arrContent.length-1].content[0].content[0].content.push(arr[i].content[0].content[0].content[0]);
}else{
arrContent[arrContent.length-1].content[0].content.push(arr[i].content[0].content[0]);
}
}else{
arrContent[arrContent.length-1].content.push(arr[i].content[0]);
}
}else{
arrContent.push(arr[i])
}
}
console.log("合并", arrContent);
数据到此就安排完毕,接下来是html 部分
html 部分
- 刚刚生成的数组名称为
tableList, 嵌套遍历
<div v-for="(item, index) of tableList" :key="index" class="tableList">
<span class="name">{{item.name}}</span>
<div class="contentItem1">
<div v-for="(item1, index1) of item.content" :key="index1" :class="'item1_'+index1" class='row1'>
<span>{{item1.name}}</span>
<div class="contentItem2">
<div v-for="(item2, index2) of item1.content" :key="index2" :class="'item2_'+index2" class="row2">
<span>{{item2.name}}</span>
<div class="contentItem3">
<div v-for="(item3, index3) of item2.content" :key="index3" :class="'item3_'+index3" class='row3'>
<span>{{item3.name}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css部分
- css 部分是比较麻烦的，比起数据转化，这里花费的时间更多,先贴代码，下次有空再补解析
.tableList{
display: flex;
width: 360px;
margin: auto;
text-align: center;
align-items: center;
border-bottom:1px solid;
border-left: 1px solid;
border-right: 1px solid;
.item1_0,.item2_0,.item3_0{
display: inline;
}
.row1,.row2{
display: flex;
align-items: center;
border-left: 1px solid;
}
.row3{
border-left: 1px solid;
}
.row2{
border-top: 1px solid;
}
.item2_0{
border-top: 0px solid;
}
.contentItem2,
.contentItem3{
display: flex;
flex-direction: column;
}
span{
display: table-cell;
width: 90px;
text-align: center;
margin: auto;
}
}
