树搜索

实现树的搜索

通过关键字模糊搜索，将其他不涉及的分支移除
子节点符合规则，孙节点不符合规则，剔除孙节点，显示子节点以上的节点
搜索节点以上字根节点

图形演示大概逻辑

export default {
  components: {
    treeNode
  },
  name: 'tree_s',
  data () {
    return {
      treeData: [
        {
          title: '0',
          id: 1,
          parentId: 0,
          children: [
            {
              title: '0-0',
              id: 2,
              parentId: 1,
              children: [
                {
                  title: '0-0-0',
                  id: 3,
                  parentId: 2,
                  children: []
                },
                {
                  title: '枣1',
                  id: 4,
                  parentId: 2,
                  children: [
                    {
                      title: '红',
                      id: 5,
                      parentId: 4,
                      children: [
                        {
                          title: '红枣',
                          id: 7,
                          parentId: 5,
                          children: []
                        }
                      ]
                    },
                    {
                      title: '小红',
                      id: 6,
                      parentId: 4,
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          title: '1',
          id: 8,
          parentId: 0,
          children: [
            {
              title: '778',
              id: 9,
              parentId: 8,
              children: []
            }
          ]
        },
        {
          title: '2',
          id: 10,
          parentId: 0,
          children: [
            {
              title: '枣枣',
              id: 11,
              parentId: 10,
              children: [
                {
                  title: '456',
                  id: 12,
                  parentId: 11,
                  children: []
                }
              ]
            }
          ]
        }
      ],
      filterTree: [],
      filterValue: ''
    }
  },
  watch: {
    filterValue: function (val) {
      if (val === '') {
        this.filterTree = this.treeData
      } else {
        this.handelTree(val)
      }
    }
  },
  methods: {
    handelTree (val) {
      // 将树扁平化 同时查找包含关键字的节点
      const delayering = this.delayering(val)
      const treeNode = delayering.treeNode
      const likeNode = delayering.likeNode
      const resultTree = []
      const resultTreeObj = {}
      const childNodeObj = {}
      // 将查找出来的节点逆推
      function f (node) {
        if (node.parentId === 0) {
          if (!resultTreeObj[node.id]) {
            resultTree.push(node)
            resultTreeObj[node.id] = true
          }
        } else {
          if (!childNodeObj[node.id]) {
            treeNode[node.parentId].children.push(node)
            childNodeObj[node.id] = true
          }
          f(treeNode[node.parentId])
        }
      }
      // 把根节点每一项代入
      for (let i = 0; i < likeNode.length; i++)f(likeNode[i])
      this.filterTree = resultTree
    },
    // 扁平化方法
    delayering (val) {
      const treeNode = {}
      const likeNode = []
      function f (childNode) {
        for (let i = 0; i < childNode.children.length; i++)f(childNode.children[i])
        childNode.children = []
        treeNode[childNode.id] = childNode
        if (childNode.title.indexOf(val) !== -1) likeNode.push(childNode)
      }
      const treeData = JSON.parse(JSON.stringify(this.treeData))
      for (let i = 0; i < treeData.length; i++) f(treeData[i])
      return { treeNode, likeNode }
    }
  }
}

搜索演示地址：树搜索

关于树的渲染实现：组件递归 树的实现

还有很多方法可以实现树搜索，不妨再来和我交流一下吧