描述

过滤递归遍历 Tree（树状结构），支持函数式编程（函数回调），高扩展 常用 v3.0.10+

// filter 为每个节点增加属性如下，__depth__、__id__、__level__、__pId__、__rootNode__
// children: (3) [{…}, {…}, {…}]
// id: 1
// name: "二级 1-1"
// order: 2
// parentId: null
// __depth__: 1  // 当前节点深度
// __id__: "0-1" // 节点经过的路径
// __level__: 1 // 当前节点深度
// __pId__: "0" // 父节点经过的路径
// __rootNode__: {id: 1, name: '二级 1-1', parentId: null, order: 2, children: Array(3), …} // 顶层根节点

1.示例

输入label名： 保留子孙节点： 否

[
  {
    "id": 1,
    "label": "一级 76666",
    "children": [
      {
        "id": 4,
        "label": "二级 1-1",
        "children": [
          {
            "id": 9,
            "label": "三级 1-1-1"
          },
          {
            "id": 10,
            "label": "三级 1-1-2"
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "label": "一级 2",
    "children": [
      {
        "id": 5,
        "label": "二级 2-1"
      },
      {
        "id": 6,
        "label": "二级 2-2"
      }
    ]
  },
  {
    "id": 3,
    "label": "一级 3",
    "children": [
      {
        "id": 7,
        "label": "二级 3-1"
      },
      {
        "id": 8,
        "label": "二级 3-2"
      }
    ]
  }
]

<template>
  <div>
    <div class="flex justify-center">
      <label>
        <span>输入label名：</span>
        <input v-model="input" class="border-[#8c8c8c] border-1px px-8px rounded-4px" placeholder="过滤label名" />
      </label>
      <label class="ml-20px">
        <span>保留子孙节点：</span>
        <input
          id="wu"
          type="radio"
          v-model="retainChild"
          @change="retainChild = !retainChild"
          @click="retainChild = !retainChild"
        />
        <span>{{ retainChild ? '是' : '否' }}</span>
      </label>
    </div>
    <br />
    <div class="overflow-y-auto h-400px !bg-[transparent] border-1px border-[#eee] rounded-sm !px-12px">
      <pre class="!p-0 !bg-[transparent] text-[12px]">{{ _json }}</pre>
    </div>
  </div>
</template>

<script>
import { filterTree } from 'sf-utils2'

export default {
  data() {
    return {
      input: '',
      retainChild: false // 是否保留节点
    }
  },
  methods: {},
  created() {
    this._tree = [
      {
        id: 1,
        label: '一级 76666',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1'
              },
              {
                id: 10,
                label: '三级 1-1-2'
              }
            ]
          }
        ]
      },
      {
        id: 2,
        label: '一级 2',
        children: [
          {
            id: 5,
            label: '二级 2-1'
          },
          {
            id: 6,
            label: '二级 2-2'
          }
        ]
      },
      {
        id: 3,
        label: '一级 3',
        children: [
          {
            id: 7,
            label: '二级 3-1'
          },
          {
            id: 8,
            label: '二级 3-2'
          }
        ]
      }
    ]
  },

  computed: {
    _json() {
      if (!this.input) {
        return this._tree
      }
      return filterTree({
        tree: this._tree,
        retainChild: this.retainChild, //是否保留子孙节点
        props: { children: 'children' }, // 属性字段映射
        callbackItem: (item, index, list, parentObj) => {
          // item => 当前树节点, index => 当前树节点索引, list => 当前树节点数组, parentObj => 父节点
          console.log('回调函数的值@callbackItem', item, index, list, parentObj)
          // 其中item输出的值是:
          // children: (3) [{…}, {…}, {…}]
          // id: 1
          // name: "二级 1-1"
          // order: 2
          // parentId: null
          // __depth__: 1  // 当前节点深度
          // __id__: "0-1" // 节点经过的路径
          // __level__: 1 // 当前节点深度
          // __pId__: "0" // 父节点经过的路径
          // __rootNode__: {…} // 顶层根节点
          return item?.label?.includes?.(this.input) // 返回结果为true，即过滤
        }
      })
    }
  }
}
</script>

显示代码 复制代码 复制代码

⚠️ 注意

在使用filterTree方法时，会默认给每个节点加上 __id__（节点经过路径） 、 __pId__（父节点经过的路径）、__depth__（当前节点深度）、__rootNode__（最上层，根节点对象） ，__id__ 每一个子节点唯一值，__pId__ 每一个子节点中的父节点值， 你会发现这边的 __id__ 看起来是有规则的，它是下标索引为基值，比如 __id__ 是 0-1-1-1-1 时，表面它处于第 4 层、之前途径的路径是 0-1、0-1-1、 0-1-1-1， 这样方便平时业务中做其他操作，比如要获取每个子节点所有途经的节点集合，我们只需要遍历刚才的 0-1、0-1-1、 0-1-1-1 去 list 中找到 __id__ 是其中之一。是不是感觉很方便？😁
同时还会给每个节点默认加上__depth__（当前节点深度）、__rootNode__（最上层，根节点对象） v3.3.0+ 每一个节点都会增加 __prevNode__（当前节点相邻的上一个节点）属性、__nextNode__（当前节点相邻的下一个节点）属性。

2.入参说明

主入参

参数	说明	类型	是否必填	默认值
tree	原数据（要转换的数据集）	Array	是
props	自定义字段键名，详情见下 👇	Object	否
callbackList	每次列表循环回调函数，详情见下 👇	Function	否	null
callbackItem	每次列表每一项回调函数，详情见下 👇	Function	否	null
isDeepClone	是否要深拷贝原 tree 对象，默认true	Boolean	否	true

props 对象

参数	说明	类型	是否必填	默认值
children	定义children键名	String	否	children
order	是否转化树形时排序	Boolean	否	false
orderField	定义排序键名	String	否	sort
orderBy	定义排序方向键名，可选值 asc（升序） desc（降序）	String	否	asc

callbackList 回调函数，接收参数，每一层树list 回调函数，方便排序

参数	说明	类型	是否必填	默认值
list	当前树节点数组	Array	否
parentObj	父节点对象	Object	否

callbackItem 回调函数，接收参数

参数	说明	类型	是否必填	默认值
item	当前树节点	Array	否
index	当前树节点索引	Number	否
list	当前树节点数组	Array	否
parentObj	父节点对象	Array	否

3.源码

import eachTree from '@/array/eachTree'
import arrayToObj from '@/array/arrayToObj'
import isFunction from '@/base/isFunction'
import uniq from '@/array/uniq'
import listToTree from '@/array/listToTree'
import isPlainObject from '@/base/isPlainObject'
import def from '@/object/def'
import deepClone from '@/object/deepClone'
import { _includesChildPath, _getPathLists } from '@/_helper/_helperTreeBase'
import merge from '@/object/merge'

/**
 * 根据回调函数过滤树状
 * @param {Array<any>} tree 树状结构
 * @param {Object} props 属性映射
 * @param {Boolean} retainChild 是否保留子孙节点
 * @param {Function} callbackList 每一层树list 回调函数
 * @param {Function} callbackItem 每一项回调函数
 * @param {Boolean} isDeepClone 是否深度克隆原树型对象
 * @returns {*}
 */
function filterTree({
  tree = [],
  props = { children: 'children', order: false, orderField: 'order', orderBy: 'asc' },
  retainChild = false,
  isDeepClone = true,
  callbackItem,
  callbackList
}) {
  if (!isFunction(callbackItem)) return tree
  if (isDeepClone) tree = deepClone(tree)

  let defaultOptions = {
    children: 'children',
    order: false,
    orderField: 'order',
    orderBy: 'asc'
  }
  props = merge({}, defaultOptions, props)

  const __id__ = '__id__'
  const __pId__ = '__pId__'
  const treeList = []
  let validIdsList = []

  eachTree({
    tree: tree,
    isDeepClone: false,
    props: { children: props.children },
    callbackItem: function (item, index, list, parentObj) {
      treeList.push(item)
      if (callbackItem(...arguments)) {
        validIdsList.push(item[__id__])
      }
    }
  })

  const treeListObj = arrayToObj(treeList, __id__)
  validIdsList = uniq(validIdsList) // 去重

  const validIdsListObj = {}
  validIdsList.forEach(v => {
    const pathLists = _getPathLists(v)
    pathLists.forEach(o => {
      const target = treeListObj[o]
      if (target) {
        validIdsListObj[o] = target
      }
    })
    if (retainChild) {
      treeList
        .filter(o => _includesChildPath(o[__id__], v))
        .forEach(o => {
          const key = o[__id__]
          validIdsListObj[key] = o
          // console.log('existIdx@', key, v)
        })
    }
  })

  const __id2__ = '__@id__'
  const __pId2__ = '__@pId__'

  const list = Object.values(validIdsListObj).map(v => {
    if (isPlainObject(v)) {
      def(v, __id2__, v[__id__])
      def(v, __pId2__, v[__pId__])
      delete v[props.children]
    }
    return v
  })
  // console.log('Object.values(validIdsListObj)', list, Object.values(validIdsListObj))
  // console.log('变化了@1')
  return listToTree({
    list,
    root: '@',
    props: { id: __id2__, parentId: __pId2__, children: props.children },
    callbackList,
    callbackItem: item => {
      delete item[__id2__]
      delete item[__pId2__]
    },
    isDeepClone: false
  })
}

export default filterTree