Vue ：浅谈树形数据转换的几种方式

小小 前端 ： 创作不易，觉得有用的小伙伴记得点赞关注一波哦！点关注不迷路

别划走呀，老铁点个关注再走！感谢老铁支持 （博主会长期更新，下面我们对table树形组件数据做个简单的小手术）

一、平铺数据转树形数据：

      这个主要考察了一下递归的思想

      方法一：（暴力求解）

     /**
         * 构造树型结构数据
         * @param {*} data 数据源
         * @param {*} Pid 父节点字段 
         * @param {*} id  子节点id
      */
      function handleTree(data,Pid,id){  
        const list =[];
        data.map(item=>{  //找到最上层的数据 父级节点为空
             if(item[Pid] == ''){
                list.push(item);
             }
        });

        for(let i =0;i<list.length;i++){
            setTree(list[i]) 
        };
        
        function  setTree (row){
            row.children =[];
            for(let j= 0;j< data.length;j++){
                if(data[j][Pid] == row[Id]){ //Id 为子id 当前数据的id
                    row.children.push(data[j]);
                    setTree(data[j]);
                };
            }
        }
        return list
       }

方法一差不多我们也了解了，下面我们来看看第二个方法：

      前端是一门美学，文化更是博大精深；前路漫漫，任重道远呀！

      方法二：

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
 function handleTree(data, id, parentId, children) {
    let config = {
        id: id || 'id',
        parentId: parentId || 'parentId',
        childrenList: children || 'children',
    };

    var childrenListMap = {};
    var nodeIds = {};
    var tree = [];

    for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
            childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
    }

    for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
            tree.push(d);
        }
    }

    for (let t of tree) {
        adaptToChildrenList(t);
    }

    function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
            o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
            for (let c of o[config.childrenList]) {
                adaptToChildrenList(c);
            }
        }
    }
    return tree;
}

说到这里方法二我们也大概了解了，大家还记得第一个我们写的是什么样子的吗？

下面我们就讲讲我们如何精简一下下呢。

filter 的基本用法

   filter属性是前端数组中经常会用到的过滤方法（至于数组有哪些常用的方法呢？数组的处理我们在工作中应该经常会遇到吧，学好数组常用事件可以在工作中很明显的加大工作效率，这里就浅埋一个伏笔，其实很简单，关注博主下个内容我们江湖再见）

   方法三：（filter 的运用）：

    /**
         * 构造树型结构数据
         * @param {*} data 数据源
         * @param {*} id  子节点字段
         * @param {*} pid 父节点字段 
         * @param {*} parentId  当前行父级id 
       */
    const handleTree = (data = [], id, pid, parentId) => {
    const array = JSON.parse(JSON.stringify(data));
    return array
        .filter(item =>
            parentId === undefined ? item[pid] === null || item[pid] === '' : item[pid] === parentId
        )
        .map(item => {
            let children = handleTree(array, id, pid, item[id]);
            if (children.length > 0) {
                item.children = children.sort((a,b)=>a.listOrder -b.listOrder)
            } else {
                item.children = [];
            }
            return item;
     });
    };

        这几种方法都是针对table 组件树形转换的（建议在全局引用，适用于有子级id，父级id两个字段的树形排列）。

一、树形数据转平铺数据：

       方法一：（暴力求解）

         下面的这个方法把数组里面的每条 数据的 "children" 属性都直接拿过来了，如果不想有children,检验把这个属性设置为 'null'。

  /** 回溯、递归
     * @param data // 树形数据
     * @param arr  // 转平铺的数组 建议传'[]'
 */
 function recall(data,arr){
  for(let i =0;i<data.length;i++){
    arr.push(data[i]);
    if(data[i].children && data[i].children.length){
      recall(data[i].children,arr)
    }
  }
}

       方法二：（利用es6 新语法）

       下面这里如果是有不清楚什么是es6新语法糖的建议百度搜索一下哦，时代在进步，技术也在进步，我们要紧跟上时代的步伐。

       come on! $$$

/**
 * 把树形数据转为平级数据
 * @param  data 数据源
 */
const recall = (data = []) => {
    let arr = [];
    if (data.length > 0) {
        data.forEach(x => {
            arr = [...arr, x];
            if (x.children) {
                arr = [...arr, ...recall (x.children)];
            }
        });
    }
    arr = arr.map(x => {
        // delete x.children;
        return x;
    });
    return arr;
};

        树形数据转换平铺数据的例子写到这里我们就不写了，树形转平铺的方式有很多很多，这就不一一列举了，创造不易，点关注不迷路，我是小小 前端 ；不要问小小中间为啥还有个空格呢？大家修改小小前端用户名，点击确定就知道啦，快乐的时光总是短暂的，这期我们就到这里啦，点关注不迷路 ，我就是小小 前端， 下条内容我们江湖再见！

        在前端树形的转换方式有很多很多，上述的平铺数据对树形的转换方式限于两个字段的树形转换，大家可以根据工作需求安排合理的转换方式，这里可以@博主哦，我们一起探讨，革命尚未成功，同志仍需努力！在前端的知识海洋里翱翔，说到这里博主祝大家都工作顺利、升职加薪、心想事成。