后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件

将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] = labelif(children.length > 0) obj[this.defaultProps.children] = children // 有数据的就添加到对象return obj}}})</script></body>
</html>

后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件相关推荐

php接口返回一个数组怎末写_php api返回json数组
[PHP] 为JSON数据的API返回空数组或者空对象 PHP 中,不管是 list 或者 dictionary 都使用一样的 [](或者 array()) 来定义. 在使用 JSON 作为 API ...
html如何遍历ajax数组,ajax返回json数组遍历添加到html
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:- 例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示造一个外部下拉列表框 J ...
java后端返回json_Java后端返回Json数据
Java后端返回Json数据 Jackson 导包 com.fasterxml.jackson.core jackson-databind 2.12.1 创建ObjectMapper对象,调用writ ...
php返回json数组前面出现乱码“锘縶”解决办法
今天遇到一个坑爹的问题,使用curl跨域请求接口返回json数组的时候出现乱码"锘縶"? 什么鬼东西去除了半天bom没好使,真是坑爹,最后在返回接口前面加ob_clean()完美 ...
php 返回数组出现乱码,「锘」php返回json数组前面出现乱码“锘縶”解决办法 - 金橙教程网...
锘今天遇到一个坑爹的问题,使用cURL跨域请求接口返回JSON数组的时候出现乱码"锘縶"? 什么鬼东西去除了半天bom没好使,真是坑爹,最后在返回接口前面加ob_clean() ...
php返回json数组元素,php生成返回json对象数组（json支持中文）
php生成返回json对象数组注意两种方法生成的对象数组在结构上的区别 $jarr=array( 'total' => 239, 'list' => array( array( 'cod ...
octotree插件 --- 将 Github 项目代码以树形格式展示
简介 octotree 是一款chrome插件,它可以将 GitHub 项目代码以树形格式进行展示,非常适合我们探索项目源,并且我们可以下载指定的文件,而无需将整个项目都下载下来. octotree下 ...
【vue】前端根据后端返回的code码查字典表展示文本
有时候请求回来的数据列表只有字典表的对应编码,需要前端从字典表找到对应的文本并展示如果不想写一大堆循环或者if的话可以用以下的方法来写下边为模拟的数据 //模拟的数据 let list = [{t ...
响应后端返回的数据，如何将数据展示出来
通过后端给的接口,连接后端,进而获取数据,并将获取的数据展示在表格中去.下面是本人自己做的一个简单的案例,如果有什么问题或更简洁的方法,欢迎讨论. 先看下效果图,是否理想的样子: 其源代码,含有详细的 ...

后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件

后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件相关推荐

最新文章

热门文章