利用递归把扁平数据转化成树形数据

This commit is contained in:
jiutianzhiyu 2021-03-28 01:36:38 +08:00
parent 8736d78b1f
commit 387e18059d
2 changed files with 26 additions and 2 deletions

View File

@ -0,0 +1,16 @@
export function listToTreeData(list, currentPid) {
const res = []
list.forEach(item => {
if (item.pid === currentPid) {
// 对于找出来的子节点, 都要再找它的下一级
// 把当前的item.id 作为下一层的 pid
const children = listToTreeData(list, item.id)
// 什么时候停止, 找不到下一级的时候停止
if (children.length > 0) {
item.children = children
}
res.push(item)
}
})
return res
}

View File

@ -18,6 +18,7 @@
<script> <script>
import treeTools from './componets/tree-tools.vue' import treeTools from './componets/tree-tools.vue'
import { getDepartments } from '@/api/departments' import { getDepartments } from '@/api/departments'
import { listToTreeData } from '@/utils/list-to-treedata'
export default { export default {
components: { treeTools }, components: { treeTools },
data() { data() {
@ -33,7 +34,8 @@ export default {
async created() { async created() {
const res = await getDepartments() const res = await getDepartments()
console.log(res) console.log(res)
this.departs = res.depts this.departs = [...listToTreeData(res.depts, '')]
console.log(this.departs)
this.company = { this.company = {
name: 'xx股份有限公司' || res.companyName, name: 'xx股份有限公司' || res.companyName,
manager: '负责人' manager: '负责人'
@ -43,9 +45,15 @@ export default {
} }
</script> </script>
<style scoped> <style>
.tree-card { .tree-card {
padding: 30px 140px; padding: 30px 140px;
font-size:14px; font-size:14px;
} }
.is-leaf{
visibility:hidden;
}
.el-icon-arrow-down{
display: none;
}
</style> </style>