平行（扁平）数据转树形结构 与 搜索功能的实现

vue中扁形（平行数据）搜索完之后转树形结构，并返回父级路径（js实现）

搜索功能

搜索关键字将符合条件的节点及父节点全部返回

  currentLable(wgObj,name,combination=[]){
            //name 搜索框输入的值；
            //wgObj 传入的非树形（平行）数据  若是树形结构则可以先转换一下
            //combination 返回的搜索数据(平行)

            function SearchTreeByName(wgObj,name) {
                //先获取与输入框匹配的节点数组
                var titleArr = [];
                wgObj.forEach(function (o) {
                    if (o.name.lastIndexOf(name) !== -1) titleArr.push(o);
                });
                //递归检索节点(子节点符合父节点不符合也需要带上父节点)
                var arrTarget = [];
                for (let i = 0; i < titleArr.length; i++) {
                    var forFn = function (id, name) {
                        for (var j = 0; j < wgObj.length; j++) {
                            if (id === wgObj[j].id) {
                                arrTarget.push(wgObj[j]);
                                forFn(wgObj[j].parentId, name);
                                break;
                            }
                        }
                    };
                    forFn(titleArr[i].id, titleArr[i].name);
                }
                //递归完之后去重取目标树数据
                combination = [];
                for (let i = 0; i < arrTarget.length; i++) {
                    var flag = 1;
                    for (var j = 0; j < combination.length; j++) {
                        if (combination[j].id === arrTarget[i].id && combination[j].parentId ===arrTarget[i].parentId) {
                            flag = 0;
                        }
                    }
                    flag === 1 ? combination.push(arrTarget[i]) : false;
                }
                return combination;
            }
            // eslint-disable-next-line new-cap
            return SearchTreeByName(wgObj,name);
        },

转树形结构

/**
 * 处理包含id pid的数组 返回树形数据
 * @export [] 返回序列化后的树形数组
 * @param { array } lists 获取到的数组
 * @param { string } idName id名字
 * @param { string } pIdName 父级id名
 */
import { uniqBy } from 'lodash';
export default function listToTree(lists, idName, pIdName) {
    if (!lists.length) return [];
    uniqBy(lists, idName);
    let map = new Map();
    for (let o of lists) {
        o.children = [];
        o.isLeaf = 0;
        o.prechildrenLength = 0;
        map.set(o[idName], o);
    }
    let result = new Array([]);
    for (let ele of lists) {
        toListSet(ele, map, result, pIdName);
    }
    return result;
}

function toListSet(ele, map, result, pIdName) {
    if (map.has(ele[pIdName])) {
        // 提出父元素
        let pele = map.get(ele[pIdName]);
        if (pele) {
            ele.isLeaf = pele.isLeaf + 1;
            pele.children.push(ele);
            pele.prechildrenLength = pele.children.length;
        }
    } else {
        // console.log('ele', ele)
        result.push(ele);
    }
}

直接创一个js文件使用cv大法，例如 listTotree.js
使用的时候只需要

//直接引入使用即可
import totreeList from '@/utils/listToree.js'


//this.orgtree:平行数据（一维数组）
//id:唯一标识
//pid:此数据的父级id
let tree = totreeList(this.orgtree,'id','parentId')

使用了uniqBy 去重，出现id相同的情况就不适用了
需要将id处理为不相同的

搜索功能现在未实现搜索上级展示下级功能
转树形结构的若是返回的数据中有一个空数组直接 slice（1）即可