vue tree类型数据格式处理数据

1. 参考数据

let tree_data = [
    {
     id: 1,
     label: '一级 1',
     children: [
      {
       id: 4,
       label: '二级 1-1',
       children: [
        {
         id: 9,
         label: '三级 1-1-1',
        },
        {
         id: 10,
         label: '三级 1-1-2',
        },
       ],
      },
     ],
    },
    {
     id: 2,
     label: '一级 2',
     children: [
      {
       id: 5,
       label: '二级 2-1',
      },
      {
       id: 6,
       label: '二级 2-2',
      },
     ],
    },
    {
     id: 3,
     label: '一级 3',
     children: [
      {
       id: 7,
       label: '二级 3-1',
      },
      {
       id: 8,
       label: '二级 3-2',
       children: [
        {
         id: 11,
         label: '三级 3-2-1',
        },
        {
         id: 12,
         label: '三级 3-2-2',
        },
        {
         id: 13,
         label: '三级 3-2-3',
        },
       ],
      },
     ],
    },
   ]

let id = 6;

2. 递归查找 -- 当前的数据

// 递归查找 当前的数据
 /**
  * 说明：
  *  data：传入的data需为数据且不能为空
  *  target_id：目标数据的id或其他内容，但必须为该条数据的唯一标识
  *  target_data：固定返回一个Object对象
 **/
    recursive(data, target_id) {
        let target_data = {}
        // 传入的数据格式需为数组且不能为空
        if (!Array.isArray(data) || !data.length) {
            return target_data
        }
        // 递归过程
        let get_target_data = item => {
            if (item.id == target_id) {
                target_data = item
            } else {
                if (item.children && item.children.length) {
                    for (let i = 0; i < item.children.length; i++) {
                        if (Object.keys(target_data).length) break;
                        get_target_data(item.children[i])
                    }
                }
            }
        }
        // for循环传入的data数据并开始递归
        for (let i = 0; i < data.length; i++) {
            if (Object.keys(target_data).length) break; // 同上
            get_target_data(data[i])
        }
        return target_data
    },



    // 调用
    this.recursive(this.tree_data, this.id)

3. 递归查找 -- 根据id查找所在父级数据

/**
* 说明：
* value：是比较值
* treeData：完整的树表
* key：value对应的属性名
**/
baseGetTreeDeepArr(value, treeData, key) {
    let arr = [] // 在递归时操作的数组
    let returnArr = [] // 存放结果的数组
    let depth = 0 // 定义全局层级
    // 定义递归函数
    function childrenEach(childrenData, depthN) {
        for (let j = 0; j < childrenData.length; j++) {
        depth = depthN // 将执行的层级赋值 到 全局层级
        arr[depthN] = (childrenData[j][key])
    
        if (childrenData[j][key] == value) {
            returnArr = arr.slice(0, depthN + 1) // 将目前匹配的数组，截断并保存到结果数组，
            break;
        } else {
            if (childrenData[j].children) {
                depth++;
                childrenEach(childrenData[j].children, depth)
            }
        }
    }
        return returnArr;
    }
    return childrenEach(treeData, depth)
},


// 调用
this.baseGetTreeDeepArr(this.id, this.tree_data, 'id')

4. 根据id查找所有的父级id

findParent(tree, nodeId, config) {
       const { children = 'children', id = 'id' } = config || {};
       const toFlatArray = (tree, parentId) => {
           return tree.reduce((t, val) => {
           const child = val[children]
           return [
               ...t,
               parentId ? { ...val, parentId } : val,
               ...(child && child.length ? toFlatArray(child, val[id]) : [])]
           }, [])
       };
       const getIds = flatArray => {
           let ids = [nodeId]
           let child = flatArray.find(val => val[id] === nodeId)
           while (child && child.parentId) {
               ids = [child.parentId, ...ids]
               child = flatArray.find(val => val[id] === child.parentId)
           }
           return ids
       }
     return getIds(toFlatArray(tree))
},

调用
let studentDept = this.findParent(this.tree_data, Number(row.id), [])