本文主要是实现多级嵌套json获取所有子元素。
一、数据源
datas = {
isselect:true, // 是否可选
title:"福州市", // 标题
value:"100", // 唯一标识
children:[{ // 子集
isselect:true,
title:"福州市直属",
value:"1001",
children:[{ // 二级子集
isselect:true,
title:"福州市领导",
value:"10011",
children:[{ //三级子集
isselect:false,
title:"赵书记",
value:"100111",
},{
isselect:false,
title:"李书记",
value:"100112",
},{
isselect:false,
title:"王书记",
value:"100113",
}
]
},{
isselect:true,
title:"莆田市领导",
value:"10012",
children:[{
isselect:false,
title:"张书记",
value:"100121",
},{
isselect:false,
title:"钱书记",
value:"100122",
},{
isselect:false,
title:"白书记",
value:"100123",
}
]
}]
}]
}
二、循环遍历取子元素,此方法可用作计算属性
choiceData() {
let data = [];
let datas = this.datas ; // 此处的datas为上述数据源
datas.children.forEach((e, i) => { // 一级
if(e.children[i].isselect == false) {
data = data.concat(e.children);
} else {
e.children.forEach((item, j) => { // 二级
if(item.children[j].isselect == false) {
data = data.concat(item.children);
}
})
}
})
return data;
}
三、拓展:模拟模糊查询
eg:js判断数组是否包含某个字符串变量的实例
keywordSearch() {
let searchList = [];
// 遍历关键词
this.choiceData.forEach((e) => {
if(e.title.indexOf(this.keyWord)>-1) { // this.keyWord为关键词
searchList = searchList.concat(e);
}
})
this.searchList = searchList;
},
效果如下: