Vue利用递归的方法,根据id获取对应的字段名(树形数据)
树形数据源options:[{id: 1,name: '一级1',children: [{id: 4,name: '二级1',},{id: 5,
·
树形数据源
options:[
{
id: 1,
name: '一级1',
children: [
{
id: 4,
name: '二级1',
},
{
id: 5,
name: '二级2',
children: [
{
id: 7,
name: '三级1',
},
{
id: 8,
name: '三级2',
children: [
{
id: 11,
name: '四级1',
},
{
id: 10,
name: '四级2',
},
]
},
{
id: 9,
name: '三级3',
},
]
}
]
},
{
id: 2,
name: '一级2',
},
{
id: 3,
name: '一级3',
children: [
{
id: 6,
name: '二级3',
children: [
{
id: 12,
name: '三级4',
},
]
},
]
}]
需要查询的id
test:[1,3,12]
定义递归函数
getTreeName(list,id){
for (let i = 0; i < list.length; i++) {
if(list[i].id===id){
return list[i].name
}else if(list[i].children && list[i].children.length>0){
let res=this.getTreeName(list[i].children,id)
if(res){
return res
}
}
}
}
对需要查询的id数组遍历输入结果
getOptionsNames(){
let newArr=[]
for(let i=0;i<this.test.length;i++){
newArr.push(this.getTreeName(this.options,this.test[i]))
}
console.log(newArr);
}
created(){
this.getOptionsNames()
},
打印结果
更多推荐
已为社区贡献8条内容
所有评论(0)