element tree获取节点的父级目录

node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

:expand-on-click-node="true" 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

:data="dataList" 展示数据，绑定dataList

@node-click="handleNodeClick"

<el-tree 
    ref="tree"
    :data="dataList"
    node-key="id"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :expand-on-click-node="true"
    >
</el-tree>

<script>
  export default {
    data() {
      return {
        dataList: [{
          label: '一级 1',
          id: '1'
          children: [{
            label: '二级 1-1',
            id: '11'
            children: [{
              label: '三级 1-1-1'
              id: '111'
            }]
          }]
        }, {
          label: '一级 2',
          id: '2'
          children: [{
            label: '二级 2-1',
            id: '21'
            children: [{
              label: '三级 2-1-1',
              id: '211'
            }]
          }, {
            label: '二级 2-2',
            id: '22'
            children: [{
              label: '三级 2-2-1',
              id: '221'
            }]
          }]
        }, {
          label: '一级 3',
          id: '3'
          children: [{
            label: '二级 3-1',
            id: '31'
            children: [{
              label: '三级 3-1-1',
              id: '311'
            }]
          }, {
            label: '二级 3-2',
            id: '32'
            children: [{
              label: '三级 3-2-1',
              id: '321'
            }]
          }]
        }],
        //父级目录列表
        parentMenuList: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
        // 点击tree的节点，触发handleNodeClick事件
        
        handleNodeClick(data, node ,el) {
            // 此处可添加点击事件的相关操作，其中data是树节点相关数据，node中亦存在树节点相关数据，另外还存在其parent和children
            console.log(data, node);
            
            // 若node未知，可根据以下方式获取相关节点的node值
            let currentNode = this.$ref.tree.getNode(data)  //该值与handelNodeClick函数参数node相同，ref.紧跟着的名称为el-tree组件
            
            
            // 获取对应节点的父级目录
            this.nodeClick(node)
            // remove()翻转的原因是，获取到的parentMenuList为层级大的在前，层级小的在后，故需要进行翻转再拼接
            let parentMenuList = this.parentMenuList.remove()
            this.parentMenuList = parentMenuList
            
            // 将获取到的父级目录列表进行组合输出，若点击三级1-1-1得到的结果为  一级 1/二级 1-1/三级 1-1-1
            let parentMenu = ''
            this.parentMenuList.forEach((item,index)=>{
                if(index !== this.parentMenuList.length-1) {
                    parentMenu += item + '/'
                } else {
                    parentMenu += item
                }
            })
            console.log(parentMenu) 
            
        },
        // 获取tree任意节点父级列表
        nodeClick (node) {
            if (node.label) {
                this.parentMenuList.push(node.label)
            }
            //迭代
            if(node.parent) {
                this.nodeClick(node.parent)
            }
        },
    }
  };
</script>