将后台数据转化为符合el-tree组件的结构

相信进来这的小伙伴一定跟我当时的心情是一样的，后台给到的数据看似能用但是又不符合我们要使用el-tree组件的数据结构，为此需要前端处理后台返回的数据，
先来看看我们需要的数据结构长什么样：

elementUI的el-tree组件的格式，elementUI传送门。就是这种需要子级结构的数据，当一级 1下还有数据（即children不为空）需要点击一级 1展开它的子级数据，当子级数据还有下级的时候同样需要展开，以此类推…只要该级的children有数据那么这条结构就还没完。
那么，后台返回给我们的数据是怎么样的呢？

这里因为数据量的问题，只截取了一部分的后台返回的数据结构。大致是这样的：
每一级都有contacts数组和orginizations数组和id和name组成。contacts数组就是当前级别的子级并且是没有children数据的。而orginizations就是代表还有下一级的数据。
注：这里声明每个数据需要有id和pid，便于数据扁平化操作之后能够找到关联的父子级关系。
好了，下面直接对数据进行操作。首先直接将后台返回的数据扁平化处理：

// 将数据扁平化处理
    delayering(data) {
      this.arr.push({
        account: null,
        id: data.id,
        pid: data.pid,
        nickName: data.name
      })
      let organizations = data.organizations
      if (organizations && organizations.length) {
        organizations.map((res) => {
          this.delayering(res)
        })
      }
      data.contacts.map(res => {
        this.arr.push(res)
      })
    }

这里的传入的数据data都是
{
id:‘数据的id值’,
pid:‘当前级的父级id’,
name:‘当前级的名字’,
organizations:[]或null,
contacts:[]或null
}
的结构。为此若organizations下有数据，则遍历的每一项也是这种结构，递归执行方法得到扁平化的数据。
将数据扁平化处理之后，监听数据的变化，将数据转化为el-tree组件的结构：

computed: {
    // 形成tree结构数据
    treeData() {
      let cloneData = JSON.parse(JSON.stringify(this.arr)) // 对源数据深度克隆
      return cloneData.filter(father => {
        let branchArr = cloneData.filter(child => father.id == child.pid) // 返回每一项的子级数组
        branchArr.length > 0 ? father.children = branchArr : father.children = [] // 如果存在子级，则给父级添加一个children属性，并赋值
        return father.pid == 0 // 返回第一层
      })
    }
  },

至此数据已经是可以使用的结构了。不管后台返回的数据有多少个子级，嵌套有多深，我们将它专为扁平化的数据再去转化为el-tree组件的结构就不难了。

组件使用

<el-tree class="filter-tree" :data="treeData" :props="defaultProps" ref="tree" highlight-current :filter-node-method="filterNode" @node-click="getCurrentNode" :render-after-expand="false">
              <template slot-scope="{node,data}">
                <el-tooltip class="item" effect="dark" :content="data.nickName" placement="top" :disabled="data.nickName&&byteLength(data.nickName)<24">
                  <span class="flow">{{ data.nickName }}</span>
                </el-tooltip>
              </template>
            </el-tree>

其中:props是根据自定义去配置属性名的，为这里是：
defaultProps: {
children: ‘children’,
label: ‘nickName’
}
这是tree组件的配置。如下：

实现的效果：

如图，只要存在下级就会有箭头，点击即可展开它的子级，直至没有下级为止。
上面的帅选矿=框是el-tree组件的自带功能。只需要我们在使用的时候配置一下即可。



这里列出我的代码，可自行调整项目需求做改动。筛选效果：

好了，本期分享到此就结束了！如有不懂的地方可以在末尾留言或直接联系我。非常欢迎各位小伙伴留言转发评论。
本人微信：huang009516