Vue 小结 --- 树形结构_vue实现树形结构-CSDN博客

本文总结了如何使用Vue.js结合Element UI的Tree组件构建组织架构的树形结构布局。通过设置组件属性如default-expand-all、data、node-key等实现树形展示，并介绍如何处理后台返回的数组数据，利用递归算法将其转化为树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组织架构----树形结构布局

一个企业的组织架构是这个企业的灵魂, 组织架构常采用树形金字塔式结构来构建

采用 element 中的 tree组件 可以实现树形结构, 用清晰的层级结构展示信息

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1'
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

树形组件属性

default-expand-all // 是否默认展开所有节点 ---- Boolean

data // 展示数据 ---- Array

node-key // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 ---- String

props // 配置如下 ---- Object

label // 指定节点标签为节点对象的某个属性值 --- String/函数
children // 指定子树为节点对象的某个属性值 --- String
disabled // 指定节点选择框是否禁用为节点对象的某个属性值 --- Boolean/函数
isLeaf // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 --- Boolean/函数

获取组织结构数据并处理

先封装一个获取获取组织结构数据的请求, 然后封装一个方法调用该请求, 再在 created() 函数中调用这个方法,从后台获取数据的数据是数组的形式,需要转化为树形结构

通过对后台数据的分析, 可以看出每个数据对象都有两个id值, 一个id值表示自身, 另一个id值表示自身的父节点, 当表示自身父节点的这个值为空时, 说明这个数据对象是一级结构, 那么就可以通过递归算法来将数据转化为树形结构

function tranListToTreeData(list,pid){
  var arr = [];
  list.forEach(item => {
    //  进到 if 里的都是一级数据(pid:'')
    if(item.pid === pid) { 
    //  判断一级数据的id有没有其他人作为pid, 如果有就说明这个一级是有二级目录的
      const children = tranListToTreeData(list,item.id);
      if(children.length>0) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}