Convert background data into a structure that conforms to el-tree components

I believe that the little friends who came here must be in the same mood as me at the time. The data provided in the background seems to be usable but does not meet the data structure of the el-tree component we want to use. For this reason, the front-end needs to process the data returned in the background.
Let's first take a look at what the data structure we need looks like:

the format of elementUI's el-tree component, and the elementUI portal . This is the kind of data that requires a child structure. When there is data under level 1 (that is, children are not empty), you need to click level 1 to expand its child data. When the child data has lower levels, it also needs to be expanded. And so on... As long as the children at that level have data, this structure is not over yet.
So, what about the data returned to us by the background?

Because of the amount of data, only a part of the data structure returned by the background is intercepted. It is roughly like this:
each level is composed of contacts array and orginizations array, id and name. The contacts array is the child of the current level and has no children data. And orginizations means that there is the next level of data.
Note: It is stated here that each data needs to have an id and pid, so that the associated parent-child relationship can be found after the data flattening operation.
Okay, let's manipulate the data directly. First, directly flatten the data returned from the background:

// 将数据扁平化处理
    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)
      })
    }

The incoming data data here is
{ id:'data id value', pid:'current level parent id', name:'current level name', organizations:[] or null, contacts:[] Or null } structure. For this reason, if there is data under organizations, each item traversed is also of this structure, and the recursive execution method obtains flat data. After flattening the data, monitor the changes in the data and convert the data into the structure of the el-tree component:

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 // 返回第一层
      })
    }
  },

So far the data is a usable structure. Regardless of how many children the data returned in the background has and how deep the nesting is, it is not difficult for us to transform it into an el-tree component structure specifically for flat data.

Component usage

<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>

Among them: props is to configure the property name according to the customization, here is:
defaultProps: { children:'children', label:'nickName' } This is the configuration of the tree component. As follows: the effect achieved:

As shown in the figure, as long as there is a lower level, there will be an arrow. Click to expand its children until there is no lower level.
The handsome beneficiation= box above is a built-in function of the el-tree component. It only needs to be configured when we use it.



Here is my code, you can adjust the project requirements and make changes. Screening effect:

Alright, this sharing period is over! If you don’t understand, you can leave a message at the end or contact me directly. You are very welcome to leave comments and forward comments.
My WeChat: huang009516