vue树形结构数据处理的方法总结
作者：佛系菇凉
在项目开发的过程中,会经常使用树形结构数据,前后端交互都会对数据进行处理,后端返回的数据前端有的时候不能直接使用需要转换,本文小编整理了一些项目中用到的处理方法,需要的朋友可以参考下
- 将树形节点改为一维数组
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 为要处理的树形结构数组， dataList 为空数组，循环遍历 data 数组，取到节点 id，push 到 dataList 中，得到新数组，如果有子集就继续遍历取节点，这样递归下去就可以得到所有节点的一维数组。
- 通过节点，查找该节点在树形结构中的路径
const getPathByKey = (curKey: any[], data: departTree[]) => {
let single: departTree[] = []; // 记录路径结果
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 为树形结构数组， curKey 为节点数组。traverse 方法获取节点路径。循环遍历 curKey，调用 traverse 方法就可获得节点的路径。
- 重构统计树形数据，修改键值。
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 函数递归出新的树形数据，定义自己想要的键值。
- 重新构造树形结构，将空子集且空员工的节点去掉
const generateTree = (data: any, dataList: any[] = []) => {
// 将树形数组转变为一维数组
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);
}
}
// 将一维数组中的空集过滤
const array = dataList.filter((item: any) => item.employees?.length !== 0 && item.children?.length !== 0)
// 将过滤后的一维数组重新生成树形结构
return listToTree(array)
}
/**
* 列表转为树，pid 值未知
* @param {*} list
* @returns
*/
function listToTree(list: any[]) {
let newArray: any[] = [];
let finalTree: any[] = [];
let ids: any[] = []; // id 数组
let pids: any[] = [] // pid 数组
// 获取列表中所有的 id
list.forEach((item: any) => {
ids.push(item.id)
})
// 获取列表中所有的 pid
list.forEach((item: any) => {
pids.push(item.pid)
})
// 获取两者差值, 筛选出 pid 不等于 id 的值，找到父节点 pid
const res = pids.filter(v => !ids.some((item) => item === v))
// 根据父节点 pid， 找到父节点数据
newArray = list.filter((item: any) => res.some((el) => el === item.pid))
// 构造树函数，data 为要构造的一维数组，parentId 为父节点 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;
}
// 根据父节点数据构造树，考虑到父节点 pid 会有多个，循环遍历数组。
newArray.forEach((el: any) => {
finalTree.push(...buildTree(list, el.pid))
})
// 因为父节点 pid 有可能有重复，这里做一个去重处理
var obj = {};
finalTree = finalTree.reduce((item: any, next: any) => {
obj[next.id] ? '' : obj[next.id] = true && item.push(next);
return item;
}, [])
return finalTree
}
- 将挂在子集的数据叠加挂到父级上。递归叠加处理
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;
}
// 将子集的数据挂载到父级的 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树形结构数据处理的方法总结的详细内容，更多关于vuejs树形结构数据处理的资料请关注脚本之家其它相关文章！