我要评论一维度数组转换成三维数组结构
目标ui图
实现想法
希望如下结构直接循环
<div v-for="items in datalist" class="data-info">
<g-card-title :data="{title:items.bigtitle}"></g-card-title>
//循环小标题list列表
<g-card v-for="item in items.list" :data="item">
/**组件内容示例**/
<div class="title" v-if="item .title">{{item .title}}</div>
<div class="content">
// 循环小标题内容itemlist列表
<div v-for="(it, key) in item .itemlist" :key="key">
{{it.name}}
</div>
</div>
/**组件内容示例**/
</g-card>
</div>
const datalist = [{
bigtitle: 'bigtitle',
list: [{
title: 'title',
itemlist: [{ name: 'name', value: 'value' },
{ name: 'name', value: 'value' }]
},
{
title: 'title',
itemlist: [{ name: 'name', value: 'value' },
{ name: 'name', value: 'value' }]
}]
}]
然后后端返回的数据为一维列表， 如下图
大概数据如下
const data=[
{value: "360", name: "前屈（活动度）",bigtitle: "一、测试结果及结论", title: "1、颈椎活动度测试结果"},
{value: "365",name: "前屈（与正常值相比）",bigtitle: "",title: ""},
{value: "365",name: "后伸（活动度）",bigtitle: "",title: ""},
{value: "360", name: "",bigtitle: "二、目标", title: ""},
]需要将此数据结构 转换成 我们所需要的结构
const datalist = [] // 目标数据列表
let bigtitlenum = 0 // 大标题的数目
let titlenum = 0 // 小标题的数目
// 循环数据
data.foreach(item => {
// 当大标题存在时
if (item.bigtitle) {
// 添加一个对象
datalist.push({ bigtitle: item.bigtitle, list: [] })
if (bigtitlenum !== 0) { titlenum = 0 }
bigtitlenum++
}
// 当小标题存在的时候 或者 只有大标题没有小标题的时候
if (item.title || (item.bigtitle && !item.title)) {
// 往该大标题的对象中添加小标题的对象
datalist[bigtitlenum - 1].list.push({ title: item.title, itemlist: [], requiredflag: item.requiredflag })
titlenum++
}
if (titlenum > 0) {
// 添加该小标题下的数据列表内容
datalist[bigtitlenum - 1].list[titlenum - 1].itemlist.push({ name: item.name, value: item.value, tagcode: item.tagcode })
}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论