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

最新推荐文章于 2024-05-12 21:33:40 发布

林忆5252

最新推荐文章于 2024-05-12 21:33:40 发布

阅读量2.2k

点赞数 5

分类专栏： js 文章标签： json elementui splay tree

本文链接：https://blog.csdn.net/weixin_46028831/article/details/121755722

版权

将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

最低0.47元/天解锁文章

林忆5252

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
后端返回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" /> <met
复制链接

扫一扫