多层数组结构的遍历，渲染成表格

已于 2022-01-19 18:18:16 修改
阅读量317 收藏
点赞数
分类专栏： vue 文章标签： 前端
于 2022-01-11 11:28:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58495461/article/details/122427981
版权 
[
    {
        "color":"#d62036",
        "name":"疑似点状出血",
        "zone":{
            "L":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            },
            "R":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            }
        }
    },
    {
        "color":"#9013fe",
        "name":"疑似片状出血",
        "zone":{
            "L":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            },
            "R":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            }
        }
    },
    {
        "color":"#f8e829",
        "name":"疑似硬渗或玻璃膜疣",
        "zone":{
            "L":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":1,
                    "area":"0.65%"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            },
            "R":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            }
        }
    },
    {
        "color":"#f5a623",
        "name":"疑似软渗或玻璃膜疣",
        "zone":{
            "L":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            },
            "R":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            }
        }
    },
    {
        "color":"#00f",
        "name":"疑似其他异常",
        "zone":{
            "L":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            },
            "R":{
                "macular":{
                    "zoneName":"黄斑区",
                    "num":0,
                    "area":"0"
                },
                "disc":{
                    "zoneName":"视盘区",
                    "num":0,
                    "area":"0"
                },
                "other":{
                    "zoneName":"后极部视网膜区",
                    "num":0,
                    "area":"0"
                }
            }
        }
    }
]```

vue结构
疑似病例区域右眼左眼
数量面积占比数量面积占比
{{item.name}}{{index}}{{item2.zoneName}}{{item.zone['R'][index2].num}}{{item.zone['R'][index2].area}}{{item.zone['L'][index2].num}}{{item.zone['L'][index2].area}}
```
小周同学:
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将二维数组用foreach遍历并以表格的形式输出
living_ren的博客
06-22 7051
非完整对齐格式的二维数组采用foreach遍历输出时应该注意的细节
三维数组渲染表格
weixin_44303631的博客
11-23 683
今天在用el-table渲染一个三维数组时，遇到了很多问题，想了很多办法都没解决，最好只好放弃，改用原生标签table进行渲染，如果你们有更好的办法，欢迎沟通交流！首先需要对后台数据进行处理，入参data为后台返回数据。下面直接拿处理好的数据进行渲染就行了。
jquery多层级遍历数据
qq_44091061的博客
04-25 1929
jquery多层级展示数据
循环数组创建表格
m0_38073829的博客
05-10 547
多层嵌套JSON数据怎么把它每一层的值遍历并取出
weixin_44252316的博客
09-12 5984
昨天碰到的笔试编程题，多层嵌套JSON数据要把他们取出来并按A,B,C,D,E,F 顺序打印出来，后面我找到这个例题，用广度优先遍历可以实现要求 JSON数据 var tree = { name: 'root', children: [{ name: 'child1', children: [{ name: 'child1_1...
JS循环数组生成html表格
weixin_30873847的博客
06-04 5002
JS操作方法一 JSON数组 @app.route('/',methods=['GET','POST']) def index(): if request.method == 'GET': return render_template('test1.html') else: res=[ ['历史沿革',...
微信小程序多层嵌套循环，二级数组遍历，设置data里面的数据 ...
03-29
一：多层嵌套循环，二级数组遍历 小程序中的遍历循环类似于angularJS的遍历。 二级数组遍历有一个坑。二级遍历wx：for循环的时候，需要注意。（代码如下） JS代码：   data: { groups: [ [ { title: '狼图腾', ...
JS数组的遍历方式for循环与for...in
10-25
本节主要介绍了JS数组的遍历方式for循环与for...in,需要的朋友可以参考下
BAT遍历多组字符串的实现语法用例
02-10
BAT遍历多组字符串的实现语法用例 FOR /F ["options"] %variable IN ("string") DO command [command-parameters] FOR /F ["options"] %variable IN ('command') DO command [command-parameters] 如何使用FOR语法...
java代码-日常练习22，三维数组及三维数组的遍历
07-15
通过理解和熟练掌握三维数组的声明、初始化以及遍历，开发者能够更有效地处理这些复杂的数据结构。 在提供的`main.java`文件中，可能包含了实现上述概念的示例代码。通过阅读和理解这段代码，你可以更好地实践和...
json的结构与遍历方法实例分析
10-19
2. **遍历数组**：可以使用`for`循环或者`forEach`方法遍历JSON数组。例如，对于上述第一种JSON结构： ```javascript var jsongood = {"goods":[{"parentId":"null","productId":1,"name":"商品","amount":"null"}...
三层结构的数据显示到表格中合并表格行
yjtt__的博客
10-28 378
表格添加合并方法 在接口中拿到数据并处理数据，接口返回的数据格式 处理数据，处理完的表格数据的结构和正常表格数据结构一样，声明length1，length2，啊，来判断表格第一列和第二列的数据应该合并多少行 表格 getcompareObjResult() { const query = { hisid: this.$route.params.hisId } c...
JS动态渲染表格
Mr.小灰狼_随笔
07-03 7736
动态渲染表格 0.0 意义: 根据一个数据(数组 / 对象), 把页面的 html 结构渲染完成 ( 渲染页面就是通过数据把页面渲染出来, 页面中的大部分内容都是靠渲染上去的, 而不是真实写死在页面上的 ) 分析数据: + 最外层是一个 数组 => 数组 表示了表格内的所有数据 1: 一个表格有多少个 tr 标签 => 由 数组内 有多少个 对象 { } 来决定 => 一个 对象 对应一个 tr 标签 2: 一个 tr 内有多少个 td 标签 => 由 对象内 有多少个
vue：v-for遍历二维数组做表格
1111111111
11-24 5720
<template> <div> <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata' border="1px solid #ccc"> <tr v-for='(item, index) in data'> <template v-for='items in item'> &l.
遍历多层嵌套对象
热门推荐
qq_36846234的博客
12-27 1万+
script> var res = {a:"aaa",b : "bbb",c:{d : "ddd",e : "eee",f:{g:"ggg",h:{i : "iii"}}},j : "jjj",k:{l:"lll",m:{n:"nnn"}}}; function Demo(){ Demo.prototype.getKeys = function(obj,arr){
jquery前端递归打印出树状结构的多层复杂map或json键值对数据
小爷欣欣
08-25 2546
从后台传来一组多层结构的复杂map键值对数据,如下: { "custId": "fc2ac08f-3261-407c-b544-c3797b30509b", "extId": null, "operatorId": "", "retCode": null, "retMsg": null, "respSysCode": null, "respSysCodeMsg": null, "respBizC
通过多层嵌套数据渲染表格
nothing_2020的博客
04-13 903
一时语塞 还是先看效果吧 简单来说就是通过html和js渲染出以上效果 这道题的难点应该是，根据以下数据渲染出这个表格吧 let list = [{ courseName: '语文', detail: [{ grade: '小学一年级', detail: [{ Id: 1, className: '1班', num: 50 }, { Id: 2, className: '2班
前端笔记9——通过for循环将JSON数组渲染到表格中
weixin_42844704的博客
04-23 1645
目标： 先看最终效果： 表格中的数据来源于后端。 代码： node.js(express框架）部分代码： （如果这部分基础有问题，请看我前面的笔记：） app.all('/json3',(request,response)=>{ //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); response.setHeader('Access-Control-Allow-Headers','*');
map函数遍历多层数组
最新发布
08-18
要使用map函数遍历多层数组，可以使用嵌套的map函数或者结合使用map和递归来实现。首先，我们可以使用嵌套的map函数对每个层级的数组进行遍历。例如，假设我们有一个三维数组arr，我们可以使用嵌套的map函数来遍历每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值