介绍 function setTreeData(源){
let 才能;cloneData =, JSON.parse (JSON.stringify(源),,,//,对源数据深度克隆
return 才能;cloneData.filter(父亲=祝辞{,,,,,,,,,,//,循环所有项,并添加孩子属性
,,,let branchArr =, cloneData.filter(孩子=祝辞,father.id ==, child.parentId);,,//,返回每一项的子级数组
,,,branchArr.length> 0, ?, father.children=branchArr :, & # 39; & # 39;,,//给父级添加一个儿童属性,并赋值
,,,return father.parentId==0;,,,//返回第一层
,,});
} function treeData (id、来源,还以为,parentId,孩子){,,
let 才能;cloneData =, JSON.parse (JSON.stringify(源))
return 才能;cloneData.filter(父亲=祝辞{
,,,let branchArr =, cloneData.filter (child =祝辞,父亲(id),==,孩子[parentId]);
,,,branchArr.length> 0, ?,父亲(孩子),=,branchArr :, & # 39; & # 39;
,,,return 父亲[parentId],==, 0,,,,//,如果第一层不是parentId=0,请自行修改
})才能
}
,//,调用时,字段名以字符串的形式传参,如treeData(源,& # 39;id # 39;,, & # 39; parentId& # 39;,, & # 39;孩子# 39;) & lt; template>
& lt; el-tree
:data=https://www.yisu.com/zixun/才能“treeData”
:道具=" defaultProps”
手风琴
@node-click=" handleNodeClick ">
<>脚本
出口默认{
名称:“测试”,
数据(){
返回{
数据:[
{id: 1、parentId: 0,名字:“一级菜单“,排名:1},
{id: 2, parentId: 0,名字:“一级菜单B”,排名:1},
{id: 3, parentId: 0,名字:“一级菜单C”,排名:1},
{id: 4, parentId: 1,名字:“二级菜单很”,排名:2},
{id: 5, parentId: 1,名字:“二级菜单a - b”,排名:2},
{parentId id: 6日:2,名字:“二级菜单b”,排名:2},
{parentId id: 7日:4,名字:“三级菜单一一一”,排名:3},
{id: 8, parentId: 7,名字:“四级菜单一一一一”,排名:4},
{parentId id: 9日:8,名字:“五级菜单一一一一一”,排名:5},
{parentId id: 10日:9,名字:“六级菜单一一一一一一”,排名:6},
{parentId id: 11日:10,名字:“七级菜单一一一一一一一”,排名:7},
{parentId id: 12日:11日,名字:“八级菜单一一一一一一一一”,排名:8},
{parentId id: 13日:12,名字:“九级菜单一一一一一一一一一”,排名:9},
{parentId id: 14日:13日,名字:“十级菜单一一一一一一一一一一”,排名:10},
),
defaultProps: {
孩子们:“孩子”,
标签:“名字”
}
}
},
计算:{
treeData () {
让cloneData=JSON.parse (JSON.stringify (this.data))//对源数据深度克隆
返回cloneData.filter(父亲=> {
让branchArr=cloneData.filter(=>孩子的父亲。id==child.parentId)//返回每一项的子级数组
branchArr。长度> 0 ?的父亲。孩子=branchArr://如果存在子级,则给父级添加一个儿童属性,并赋值
返回father.parentId==0;//返回第一层
});
}
},
方法:{
handleNodeClick(数据){//console.log(数据)
console.log (this.treeData)
}
},
安装(){
}
}>
使用JavaScript怎么实现一个无限层级的树形数据结构?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
js代码:把扁平数据转成树形数据
根据网友给我指出的问题,之前的算法会影响到源数据,之后我对获取的数据进行了深度克隆,完美解决。
封装函数:
实例1:使用element-ui的组件制作一个树形多级嵌套伸缩菜单栏
实现效果:
vue组件:
看完上述内容,你们掌握使用JavaScript怎么实现一个无限层级的树形数据结构的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
