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>