将js数组转换成tree树形组件要的数据格式，有时候后端返回的是数组没有处理成树状结构，这个时候就需要前端自行转换，这里采用递归方式转换
要展示的效果
上代码
<!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>
</head>
<body>
<div id="app">
<el-tree :data="data" :props="defaultProps" ></el-tree>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// 封装函数
// 找出对应id的子节点
function arrToTree(arr, id) {
let children = [] // 用于存放子节点
arr.forEach(v => {
// 找出对应的id的节点
if (v.pid === id) {
// 保存到对象
let obj = { label: v.job }
// 继续递归遍历找出子节点
let node = arrToTree(arr, v.id)
// 判断是否有子节点
if(node.length) obj.children = node
// 将子节点添加到数组
children.push(obj)
}
})
// 返回找到的结果
return children
}
// vue实例对象
new Vue({
el: "#app",
data: function () {
return {
arr: [
{ 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="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-tree :data="data" :props="defaultProps"></el-tree>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/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" },
{ 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 = this.arr.reduce((p, v) => {
return v.pid === "" ? p.concat([this.createTreeObj(v.name, this.getChildren(this.arr, v.id))]) : p
}, [])
console.log(this.data);
},
methods: {
// 通过id寻找子级方法，返回结果数组
getChildren(arr, id) {
return arr.reduce((p, v) => {
return v.pid === id ? p.concat([this.createTreeObj(v.name, this.getChildren(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>
版权声明：本文为weixin_46028831原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。