vue element ui el-tree 通过子节点反向递归查找父节点

今天做了一个项目采用的是element tree组件,要求子父节点不强关联,但是当我点击子节点时,会反向的选择所有的父节点,如下图:
当我点击电话时,往上一层的“电话”和“我的”均为父级以上的节点,全部选中
vue element ui el-tree 通过子节点反向递归查找父节点_第1张图片
实现方法如下,在组件中使用这个方法:
vue element ui el-tree 通过子节点反向递归查找父节点_第2张图片
然后如下是具体实现方式,反向递归查找所有的父级节点:
vue element ui el-tree 通过子节点反向递归查找父节点_第3张图片
实现代码如下:

handleRoleChange(data, checked) {
      if (checked) {
        const ids = this.$refs.tree.getCheckedKeys()
        const getId = this.treeFindPath(this.allPermissions, item => data.id === item.id)
        const newId = new Set([...ids, ...getId])
        this.$refs.tree.setCheckedKeys(newId, false)
      }
    },
    // 递归找tree的父节点
    treeFindPath(tree, func, path = []) {
      if (!tree) return []
      for (const data of tree) {
        // 这里按照你的需求来存放最后返回的内容吧
        path.push(data.id)
        if (func(data)) return path
        if (data.children) {
          const findChildren = this.treeFindPath(data.children, func, path)
          if (findChildren.length) return findChildren
        }
        path.pop()
      }
      return []
    },

分享一下,也方便日后查看。

你可能感兴趣的:(前端,elementui,vue.js)