vue过滤树形结构 vue过滤树形结构

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到树形数据,但是后端返回给我们的数据不是树形结构,我们需要把后端的数据转换为树形结构,下面我来分享一下如何实现。
4.后端返回的数据结构:

文章图片

5.但是我们使用树形组件的时候,用这样的数据是不行的,我们需要把后端返回的数据进行过滤一下:

function treelist(tree, arr = []) { if (!tree.length) return [] for (let item of tree) { // 循环数组，然后过滤数据 // 如果该条数据type不为0时，跳出本次循环 // if (item.type !== 0) continue // 如果满足条件时，用新node代替，然后把chilren清空 // console.log(item[name]); // 在原来的对象上面添加一个 label 属性 item.label = item.name; // let node = { ...item, children: [] } let node = { ...item, children: [] } // 然后添加到新数组中 arr.push(node) // 如果有子节点，调用递归函数，并把空数组传给下一个函数 // 利用引用数据类型的特性，实现浅拷贝 // 递归函数过滤时会改变这个空数组数据，从而实现层级结构过滤 if (item.children && item.children.length) { filterTree(item.children, node.children) } } return arr }

6.使用方法为: