javascript树形结构根据子节点遍历所有父节点 获取全路径 el-cascader树形结构回显

根据子节点找全部父 ,el-cascader树形结构回显

1.子节点中没有父节点的id等信息

data为树结构数据，id为子节点的id，indexArray默认给个[]就可以

	// vue中这样调用
	// treedata为树结构数据
	// nodeId 为子节点的id
	this.findIndexArray(treedata,nodeId,[]);


	// 子找父 子节点信息中没有父节点
    findIndexArray(data, id, indexArray) {
      let arr = Array.from(indexArray);
      for (let i = 0, len = data.length; i < len; i++) {
        arr.push(data[i].id);
        if (data[i].id === id) {
          return arr;
        }
        let children = data[i].children;
        if (children && children.length) {
          let result = this.findIndexArray(children, id, arr);
          if (result) return result;
        }
        arr.pop();
      }
      return null;
    },

2.子节点中有父节点的id

	// vue中调用
	// treedata为树结构数据
	// nodeId 为子节点的id
	this.getParentIdList(treedata,nodeId);

 	// 根据id 找所有父
    getParentIdList(data2, nodeId2) {
      var arrRes = [];
      if (data2.length == 0) {
        if (nodeId2) {
          arrRes.unshift(data2.id);
        }
        return arrRes;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (node.id == nodeId) {
            arrRes.unshift(node.id);
            rev(data2, node.parentId);
            break;
          } else {
            if (node.children) {
              rev(node.children, nodeId);
            }
          }
        }
        return arrRes;
      };
      arrRes = rev(data2, nodeId2);
      return arrRes;
    },

测试

实测根据情况调用两种之一，结果如下图，数组形式，配合Element-ui级联选择器 el-cascader就可以直接回显数据了。

this.findIndexArray(treedata,"4fdfd353cdfd4506851408648c7ecd41",[]);
this.getParentIdList(treedata,"4fdfd353cdfd4506851408648c7ecd41");

el-cascader树形结构回显成功，