处理树形结构和级联选择器

解决方案

方法一

export function getTreeMenuRoutes(arr) { const menuData = [] arr.forEach(item => { if (item.pid === 0) { menuData.push(item) } }) menuData.forEach(item => { item.children = [] arr.forEach(item1 => { if (item.id === item1.pid) { item.children.push(item1) } }) }) return menuData }

方法二

// ========树状数据处理函数=============== export function setTreeData(arr) { // 删除所有的children, 以防止多次调用 if (JSON.stringify(arr) === '{}') { return } arr.forEach(function(item) { delete item.children }) const map = {} // 构建map arr.forEach(i => { map[i.id] = i // 构建以id为键 当前数据为值 }) const treeData = [] arr.forEach(child => { const mapItem = map[child.pid] // 判断当前数据的parentId是否存在map中 if (mapItem) { // 存在则表示当前数据不是最顶层的数据 // 注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点 (mapItem.children || (mapItem.children = [])).push(child) // 这里判断mapItem中是否存在child } else { // 不存在则是顶层数据 treeData.push(child) } }) return treeData }

级联选择器

export function getCascaderData(arr) { var newArr = [] const map = new Map() arr.forEach(item => { if (map.has(item.category)) { map.get(item.category).children.push({ value: item.id, label: item.appname, id: item.id }) } else { map.set(item.category, { label: item.category, value: item.appname, id: item.id, children: [{ value: item.id, id: item.id, label: item.appname }] }) } }) newArr.push(...map.values()) return newArr }