element中tree树形控件查找父级的id

前言

大家在开发过程中的时候，如果用的Vue那么基本上都会是是使用element ui的，因为它里面的功能非常的强大，经常用的小伙伴都知道的，当然在使用这个ui库的时候，肯定会遇到这些很头疼的难题，就比如这篇文章，是来为大家讲解tree树形控件，这个组件应该很多的小伙伴都使用过，今天来为大家讲解的是通过一个节点来获取它的父级id

一、原理解释

有细心的小伙伴可能通过百度什么的可以在文档中找到这两个方法，但是它这个节点的话就是只能在有选择框的tree树上生效，如图
那么就会很头痛，因为我们当前的tree树是不需要选择框的，所以前面那两个属性就是用不了的了，我之前搜到的解决方法是修改node_modules里面的配置文件，我自我感觉是不好的，因为上传到仓库的时候在下载下来是重新装一下配置包的，所以很不推荐。
那么咱的方式是通过递归查询来解决的

二、代码解释

find(index, arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].children.length; j++) {
        //判断第一层子级的id是否与当前的查询的id相同，如果相同就输出第一层，也就是查询id的父级
          if (index === arr[i].children[j].id) {
            return arr[i].id;
            //如果第一层没有查询到，那么就查询第二层的子级的id
          } else if (arr[i].children && arr[i].children.length > 0) {
          //递归，直到输出为止
            this.find(index, arr[i].children);
          }
        }
      }
    },

index的参数就是当前要查询的id，而arr就是你的tree树的数据
调用这个递归函数的时候，要前提给上条件！！！否则传入错误的值就会报错
我这边是这么使用的

//先备一个变量，赋值用
let pidc = "";
	//首先先循环一圈，为的防止没有父级的节点，如果是的话，那我们直接赋值0，然后截断
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id === this.editForm.id) {
          pidc = 0;
          break;
        } else {
        //排除查询的值没有父级，我们就放心的调用函数就可以了
          pidc = this.find(this.editForm.id, this.data);
        }
      }

结语

自我感觉这个方法非常的实用，还可以用到很多别的地方
希望对你有所帮助