<template>
<div>
<Tree :data="newlist" show-checkbox @on-check-change="choiceAll" ref="tree4">
</Tree>
<!-- <div>{{newlist}}</div> -->
</div>
</template>
<script>
export default {
data () {
return {
content:[
{"id":1,"pid":0,"title":"默认维度","type":"0"},
{"id":2,"pid":1,"title":"上海科技有限公司","type":"1"},
{"id":3,"pid":2,"title":"北京科技有限公司","type":"1"},
{"id":4,"pid":2,"title":"北京科技有限公司","type":"1"},
{"id":117,"pid":4,"title":"测试部门","type":"2"},
{"id":5,"pid":2,"title":"徐州科技有限公司","type":"1"},
{"id":6,"pid":2,"title":"重庆科技有限公司","type":"1"},
{"id":114,"pid":12,"title":"需求分析师","type":"3"},
{"id":7,"pid":2,"title":"人力资源部","type":"2"},
{"id":100,"pid":7,"title":"修改岗位测试3","type":"3"},
{"id":101,"pid":7,"title":"添加岗位测试","type":"3"},
{"id":102,"pid":7,"title":"添加岗位测试2","type":"3"},
{"id":103,"pid":8,"title":"java开发","type":"3"},
{"id":107,"pid":7,"title":"HR","type":"3"},
{"id":8,"pid":2,"title":"产品研发部","type":"2"},
{"id":10,"pid":8,"title":"统一岗位","type":"3"},
{"id":9,"pid":2,"title":"销售部","type":"2"},
{"id":108,"pid":9,"title":"销售顾问","type":"3"},
{"id":11,"pid":2,"title":"深圳科技有限公司","type":"1"},
{"id":12,"pid":2,"title":"咨询服务部","type":"2"},
{"id":106,"pid":12,"title":"咨询顾问","type":"3"},
],
newlist:[]
}
},
methods: {
deepSort(list, content) {
var content1 = []
for (var m = 0; m < list.length; m++) {
for (var n = 0; n < content.length; n++) {
if (list[m].id === content[n].pid) {
list[m].children.push(content[n])
} else {
content1.push(content[n])
}
}
}
for (var o = 0; o < list.length; o++) {
this.deepSort(list[o].children, content1)
}
},
choiceAll (data){
console.log(data); //当复选框选中时则会打印出选中的内容
// let choicesAll=this.$refs.tree4.getCheckedNodes; //方法的运用 getSelectedNodes也是如此用法
// console.log(choicesAll);
},
},
mounted () {
for (var a = 0; a < this.content.length; a++) { //给每条数据加上children属性
this.content[a].children = []
}
for (var b = 0; b < this.content.length; b++) { //拿出最高层级的元素----pid数值最小则层级最高,此处直接取0,省去很多麻烦的数据操作
if (this.content[b].pid === 0) {
this.newlist = this.content.splice(b, 1)
}
}
this.deepSort(this.newlist, this.content)
}
}
</script>
<style>
</style>