关于vue.js: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. 应用办法为:

console.log(this.$Cmethods.treelist(res.result));

// 失去的后果为:

7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。