Vue 小结 --- 树形结构_vue实现树形结构

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

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

采用 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
}