快捷導(dǎo)航

vue樹形結(jié)構(gòu)數(shù)據(jù)處理的方法總結(jié)

更新時間：2023年11月30日 11:44:54 作者：佛系菇?jīng)?

在項目開發(fā)的過程中,會經(jīng)常使用樹形結(jié)構(gòu)數(shù)據(jù),前后端交互都會對數(shù)據(jù)進行處理,后端返回的數(shù)據(jù)前端有的時候不能直接使用需要轉(zhuǎn)換,本文小編整理了一些項目中用到的處理方法,需要的朋友可以參考下

將樹形節(jié)點改為一維數(shù)組

const generateList = (data: any, dataList: any[] = []) => {
  // console.log(data,dataList, 183);
  
  for (let i = 0; i < data?.length; i++) {
    const node = data[i];
    const { id } = node;
    dataList?.push(id);
    if (node.children) {
      generateList(node.children, dataList);
    }
  }
  return dataList
}

data 為要處理的樹形結(jié)構(gòu)數(shù)組， dataList 為空數(shù)組，循環(huán)遍歷 data 數(shù)組，取到節(jié)點 id，push 到 dataList 中，得到新數(shù)組，如果有子集就繼續(xù)遍歷取節(jié)點，這樣遞歸下去就可以得到所有節(jié)點的一維數(shù)組。

通過節(jié)點，查找該節(jié)點在樹形結(jié)構(gòu)中的路徑

const getPathByKey = (curKey: any[], data: departTree[]) => {
  let single: departTree[] = []; // 記錄路徑結(jié)果
  let result: any = []
  let traverse = (id: number, path: any, data: departTree[]) => {
    if (data?.length === 0) {
      return;
    }
    for (let item of data) {
      path.push(item);
      if (item.id === Number(id)) {
        single = JSON.parse(JSON.stringify(path.map((el: any) => el.id)));
        return;
      }
      const children = Array.isArray(item.children) ? item.children : [];
      traverse(id, path, children); // 遍歷子集
      path.pop(); // 回溯
    }
  }
  for (let i = 0; i < curKey.length; i++) {
    traverse(curKey[i], [], data);
    result.push(single)
  }
  return result;
}

data 為樹形結(jié)構(gòu)數(shù)組， curKey 為節(jié)點數(shù)組。traverse 方法獲取節(jié)點路徑。循環(huán)遍歷 curKey，調(diào)用 traverse 方法就可獲得節(jié)點的路徑。

重構(gòu)統(tǒng)計樹形數(shù)據(jù)，修改鍵值。

const mapTree = (org: any) => {
  const haveChildren = Array.isArray(org.children) && org.children.length > 0;
  return {
    label: org.egname + ' (' + org.chname + ')',
    value: org.id,
    children: haveChildren ? org.children.map((i: any) => mapTree(i)) : undefined
  }
}

通過 map 函數(shù)遞歸出新的樹形數(shù)據(jù)，定義自己想要的鍵值。

重新構(gòu)造樹形結(jié)構(gòu)，將空子集且空員工的節(jié)點去掉

const generateTree = (data: any, dataList: any[] = []) => {
    // 將樹形數(shù)組轉(zhuǎn)變?yōu)橐痪S數(shù)組
    for (let i = 0; i < data?.length; i++) {
        const node = data[i];
        const { id, pid, name, twname, egname, employees, children } = node;
        dataList.push({ id, pid, name, egname, twname, employees, children });
        if (node.children) {
            generateTree(node.children, dataList);
        }
    }
    // 將一維數(shù)組中的空集過濾
    const array = dataList.filter((item: any) => item.employees?.length !== 0 && item.children?.length !== 0)
    // 將過濾后的一維數(shù)組重新生成樹形結(jié)構(gòu)
    return listToTree(array)
}
/**
 * 列表轉(zhuǎn)為樹，pid 值未知
 * @param {*} list 
 * @returns 
 */
function listToTree(list: any[]) {
    let newArray: any[] = [];
    let finalTree: any[] = [];
    let ids: any[] = []; // id 數(shù)組
    let pids: any[] = []  // pid 數(shù)組
    // 獲取列表中所有的 id
    list.forEach((item: any) => {
        ids.push(item.id)
    })
    // 獲取列表中所有的 pid
    list.forEach((item: any) => {
        pids.push(item.pid)
    })
    // 獲取兩者差值, 篩選出 pid 不等于 id 的值，找到父節(jié)點 pid
    const res = pids.filter(v => !ids.some((item) => item === v))
    // 根據(jù)父節(jié)點 pid， 找到父節(jié)點數(shù)據(jù)
    newArray = list.filter((item: any) => res.some((el) => el === item.pid))
    // 構(gòu)造樹函數(shù)，data 為要構(gòu)造的一維數(shù)組，parentId 為父節(jié)點 pid
    function buildTree(data: any[], parentId: number) {
        let tree: any[] = [];
        data.forEach(node => {
            if (node.pid === parentId) {
                let children = buildTree(data, node.id);
                if (children.length > 0) {
                    node.children = children;
                }
                tree.push(node);
            }
        });
        return tree;
    }
    // 根據(jù)父節(jié)點數(shù)據(jù)構(gòu)造樹，考慮到父節(jié)點 pid 會有多個，循環(huán)遍歷數(shù)組。
    newArray.forEach((el: any) => {
        finalTree.push(...buildTree(list, el.pid))
    })
    // 因為父節(jié)點 pid 有可能有重復(fù)，這里做一個去重處理
    var obj = {};
    finalTree = finalTree.reduce((item: any, next: any) => {
            obj[next.id] ? '' : obj[next.id] = true && item.push(next);
            return item;
        }, [])
    
    return finalTree
}

將掛在子集的數(shù)據(jù)疊加掛到父級上。遞歸疊加處理

function getUsersForDepartment(departments: Department[]) {
    // 遞歸查找部門的所有員工
    function getAllEmployees(node: Department): any[] {
        const employees = [];
        if (node?.employees) {
            employees.push(...node?.employees);
        }
        if (node?.children && node?.children?.length > 0) {
            node.children.forEach((child) => {
                if (getAllEmployees(child)) {
                    employees.push(...getAllEmployees(child));
                }
            });
        }
        return employees;
    }
    // 將子集的數(shù)據(jù)掛載到父級的 allUsers 
    function findSubUsers(depts: Department[]) {
        depts.forEach(el => {
            el.allUsers = getAllEmployees(el)
            if (el.children && el.children.length > 0) {
                findSubUsers(el.children)
            }
        })
    }
    // 遞歸增加 allUsers
    findSubUsers(departments)
}

以上就是vuejs樹形結(jié)構(gòu)數(shù)據(jù)處理的方法總結(jié)的詳細內(nèi)容，更多關(guān)于vuejs樹形結(jié)構(gòu)數(shù)據(jù)處理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: