Vue2.x组件递归，生成Tree(数组转JSON对象)
程序员文章站
2024-03-05 11:32:12
...
Vue2.x 组件递归（tree展示）
参考
问题描述
- 最近要做一个通信面板，后台返回一个数组，标明了ID和PID的字段
- 根据后台返回的数据需要转为一个机构用户信息树
解决思路
- 将后台返回的数组转换为一个上下层级关系的JSON对象
- 根据JSON对象递归生成一个Tree组件
将数组转为JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 数组对象
let originArr = [{
id: 1,
name: '1',
}, {
id: 2,
name: '1-1',
parentId: 1
}, {
id: 3,
name: '1-1-1',
parentId: 2
}, {
id: 4,
name: '1-2',
parentId: 1
}, {
id: 5,
name: '1-2-2',
parentId: 4
}, {
id: 6,
name: '1-1-1-1',
parentId: 3
}, {
id: 7,
name: '2',
}]
// 将数组转为JSON对象的方法
function translateDataToTree(data) {
let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)
let childrens = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)
let translator = (parents, childrens) => {
parents.forEach((parent) => {
childrens.forEach((current, index) => {
if (current.parentId === parent.id) {
let temp = JSON.parse(JSON.stringify(childrens))
temp.splice(index, 1)
translator([current], temp)
typeof parent.childrens !== 'undefined' ? parent.childrens.push(current) : parent.childrens = [current]
}
})
})
}
translator(parents, childrens)
return parents
}
let treeJson = translateDataToTree(originArr)
// [{"id":1,"name":"1","childrens":[{"id":2,"name":"1-1","parentId":1,"childrens":[{"id":3,"name":"1-1-1","parentId":2,"childrens":[{"id":6,"name":"1-1-1-1","parentId":3}]}]},{"id":4,"name":"1-2","parentId":1,"childrens":[{"id":5,"name":"1-2-2","parentId":4}]}]},{"id":7,"name":"2"}]
console.log(JSON.stringify(treeJson))
</script>
</html>
根据JSON对象递归Vue对象
- 父组件，引入子组件Node
<template>
<div>
<Node :treeData="treeJson"></Node>
</div>
</template>
<script>
import Node from '@/components/Node'
const treeJson = [{ id: 1, name: '1', childrens: [{ id: 2, name: '1-1', parentId: 1, childrens: [{ id: 3, name: '1-1-1', parentId: 2, childrens: [{ id: 6, name: '1-1-1-1', parentId: 3 }] }] }, { id: 4, name: '1-2', parentId: 1, childrens: [{ id: 5, name: '1-2-2', parentId: 4 }] }] }, { id: 7, name: '2' }]
export default {
name: 'Hello',
data: function () {
return {
treeJson: treeJson
}
},
components: {
Node
}
}
</script>
- 子组件Node递归
<template>
<div class="root-node--org" >
<ul v-for="node in treeDataClone" :key="node.id">
<div class="root-node--org__name">
<span>{{node.name}}</span>
</div>
<!-- node 节点递归 -->
<Node class="root-node--org__node" :treeData="node.childrens" v-if="node.childrens && node.childrens.length > 0"></Node>
</ul>
</div>
</template>
<script>
import * as API from '@/api/index'
export default {
name: 'Node',
props: {
treeData: {
type: Array,
default: function () {
return []
}
}
},
data () {
return {
treeDataClone: {},
isShowSubNode: false,
zuoxiNum: '####'
}
},
provide () {
return {
comunicationPanel: this
}
},
mounted () {
// 将传递过来的数据克隆
const treeDataClone = JSON.parse(JSON.stringify(this.treeData))
this.treeDataClone = treeDataClone
}
}
</script>
<style lang="scss" scope>
</style>
上一篇： JAVA获得域名IP地址的方法