vue-自行封装组件,类似于el-tree组件结构
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 )
