vue 自行封装组件，类似于el-tree组件结构

背景：

接口返回是平面数组，需要经过分类处理，转成多维数组，以满足封装组件的数据结构。

有用到插件lodash。

import { groupBy, flattenDeep } from "lodash";

效果展示：

处理数据：

对于接口返回的平面数组，转成我们期望的树形结构：

期望的数据结构：

 

 数据结构转换思路：

数据结构转换思路：把接口返回的数据按照字段areaName分组，得到一个对象；把对象的属性名和属性值分别处理，转成想要的结构。

期望的结构：

 [

      {

        id: 0,

        name: "渡运88",

        lists: [

          {

            id: 0 - 0,

            name: "运输舱",

            value: "yunshucang",

          },

          {

            id: 0 - 1,

            name: "驾驶舱",

            value: "jiashicang",

          },

        ],

      },

      {},

       ...

} 

思路过程： 

按照某一个字段，分类数据： 

console.log('resData>>>',resData);

const myModifyZonetype = groupBy(resData, "areaName"); //初步分类数据

获取所有属性： 

Object.keys(myModifyZonetype)

 

获取所有属性值：

    let array = [];

    Object.keys(myModifyZonetype).forEach((key) => {

      array.push(myModifyZonetype[key])

    })

获取总数：

    let array = [];

    Object.keys(myModifyZonetype).forEach((key) => {

      array.push(myModifyZonetype[key])

    })

    const arrNum = flattenDeep(array);//多维数组转一维数组

    state.total = arrNum.length;

 

获取期望的数据结构： 

    let tempData = [];

    const _arr = Object.keys(myModifyZonetype).reduce((cre, pre) => {

      let item = myModifyZonetype[pre].map((item, index) => {

        return {

          id: item.pid,

          name: item.name,

        };

      });

      tempData.push({

        name: pre + "【" + item.length + "】",

        lists: item,

      });

      return tempData;

    }, []);

console.log(_arr )