上代码
<!DOCTYPE html>
{ id:"01", name:"⼤⽼板", pid:"", job:"总办"},
{ id:"02", name:"⽼吴", pid:"01", job:"产品部"},
{ id:"03", name:"⼩美", pid:"01", job:"⼈事部"},
{ id:"04", name:"⼩马", pid:"01", job:"开发部"},
{ id:"05", name:"⼩王", pid:"01", job:"测试部"},
{ id:"06", name:"⼩李", pid:"01", job:"运维部"},
{ id:"07", name:"丽丽", pid:"02", job:"产品1"},
{ id:"08", name:"⼤爷", pid:"02", job:"产品2"},
{ id:"09", name:"⽼⾼", pid:"03", job:"UI设计师"},
{ id:"10", name:"刘丽", pid:"04", job:"前端⼯程师"},
{ id:"11", name:"张华", pid:"04", job:"后端⼯程师"},
{ id:"12", name:"李丹", pid:"04", job:"后端⼯程师"},
{ id:"13", name:"⽼赵", pid:"05", job:"测试⼯程师"},
{ id:"14", name:"强哥", pid:"05", job:"测试⼯程师"},
{ id:"15", name:"⽼⼤爷", pid:"06", job:"运维⼯程师"}
],
data:[],
defaultProps:{
children:"children",
label:"label"
}
}
},
created(){
let tree =[]
// 出所有根节点
this.arr.forEach((v, i)=>{
if(!v.pid){
tree.push({ label: v.job, children:arrToTree(this.arr, v.id)}) }
})
this.data = tree // 将转换结果显⽰到页⾯
console.log(JSON.parse(JSON.stringify( tree )));
}
})
</script>
</body>
</html>
简洁写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge"/>
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<title>Tree组件</title>
<link rel="stylesheet"href="unpkg/element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-tree :data="data":props="defaultProps"></el-tree>
</div>
<script src="cdn.bootcdn/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="cdn.jsdelivr/npm/vue@2.6.14"></script>
<script src="unpkg/element-ui/lib/index.js"></script>
<script>
const app =new Vue({
el:"#app",
data:{
arr:[
{ id:"01", name:"张⼤⼤", pid:"", job:"项⽬经理"},
{ id:"02", name:"⼩亮", pid:"01", job:"产品leader"},
{ id:"03", name:"⼩美", pid:"01", job:"UIleader"},
vuejson转对象{ id:"04", name:"⽼马", pid:"01", job:"技术leader"},
{ id:"05", name:"⽼王", pid:"01", job:"测试leader"},
{ id:"06", name:"⽼李", pid:"01", job:"运维leader"},
{ id:"07", name:"⼩丽", pid:"02", job:"产品经理"},
{ id:"08", name:"⼤光", pid:"02", job:"产品经理"},
{ id:"09", name:"⼩⾼", pid:"03", job:"UI设计师"},
{ id:"10", name:"⼩刘", pid:"04", job:"前端⼯程师"},
{ id:"11", name:"⼩华", pid:"04", job:"后端⼯程师"},
{ id:"12", name:"⼩李", pid:"04", job:"后端⼯程师"},
{ id:"13", name:"⼩赵", pid:"05", job:"测试⼯程师"},
{ id:"14", name:"⼩强", pid:"05", job:"测试⼯程师"},
{ id:"15", name:"⼩涛", pid:"06", job:"运维⼯程师"}
],
data:[],
defaultProps:{
children:"children",
label:"label"
}
},
async created(){
// 先将⼀级节点出，在调⽤⽅法寻⼦级
this.data =duce((p, v)=>{
return v.pid ===""? p.concat([ateTreeObj(v.Children(this.arr, v.id))]): p },[])
console.log(this.data);
},
methods:{
// 通过id寻⼦级⽅法，返回结果数组
getChildren(arr, id){
duce((p, v)=>{
return v.pid === id ? p.concat([ateTreeObj(v.Children(arr, v.id))]): p
},[])
},
// ⽣成对象，根据defaultProps对象中的属性值来⽣成指定的对象
createTreeObj(label, children){
const obj ={}
obj[this.defaultProps.label]= label
if(children.length >0) obj[this.defaultProps.children]= children // 有数据的就添加到对象
return obj
}
}
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。