Vue3.0(正式版) + TS 仿知乎专栏企业级项目内置文档资料

download:Vue3.0(正式版) + TS 仿知乎专栏企业级项目内置文档资料

在实际开发中,对树形JSON数据处理的业务场景非常常见;而且这些数据必然是多层级的,那么很重要的一点就是要做到递归。特别是在动态路由筛选和树形结构数据筛选中。正所谓,“工欲善其事,必先利其器”。所以本文总结几种用于处理得到我们业务中所需的真正数据的方法。
二.实现方法

“splice”方法 (不推荐):

说明:这种方法只适应于唯一性的条件(比如:过滤唯一性id)的场景。
如果是用在筛选树形数据或者路由菜单(比如:过滤hidden为true)的场景,会因为其实正向删除index值,故导致第一次除外的每次遍历递归的index值不准确,所以删除的值也是不对的,故不推荐。

代码实现:

//只适用于唯一性的id的递归过滤
function filterData(arr, id) {
  arr.forEach((item, index) => {
    if (item.id === id) {
      arr.splice(index, 1)
    }
    if (item.children && item.children.length) {
      filterData(item.children, id)
    }
  })
}

你可能感兴趣的:(vue3)