// 樹元件
<Tree v-bind:data="structTreeData" v-bind:render="renderContent" @@on-select-change="selectChange"></Tree>

// render函式
renderContent (h, params) {
    return [
            h('span',{
                attrs:{ id: `merge-tree-node-${params.data.Id}`},
                style:{ position: 'relative'},
                on:{
                    contextmenu: (e) 
 
=> {
                        e.preventDefault();
                        this.handleMergeTreeContextMenu(params.data);
                    },
                },
            },
            [
                h('span',{},params.data.title),
                h('Icon', {
                    props: {
                        type: 
 
'ios-arrow-forward'
                    },
                    class:{
                        'right-icon':true,
                        'colorblue':true
                    }
                }),
                h('Icon', {
                    props: {
                        type: 'ios-arrow-forward'
                    },
                    style:{
                        marginLeft:
 
'-10px'
                    },
                    class:{
                        'right-icon':true,
                        'colorblue':true
                    }
                }),
                (params.data.Id == this.currentStructTreeContextMenuNode.Id && this.customIviewTreeContextmenuStatus)
                ? h('div',{ class:'custom-iview-tree-contextmenu ivu-select-dropdown ivu-dropdown-transfer'},[
                     h('ul',{ class:'ivu-dropdown-menu'},[
                        ((this.currentStructTreeContextMenuNode.NodeType=='struct' && this.currentStructTreeContextMenuNode.StructType==2) || this.currentStructTreeContextMenuNode.NodeType=='merge')
                        ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.openCreateFolderModal()}}},'新建資料夾')
                        : null,
                        (this.currentStructTreeContextMenuNode.NodeType=='merge')
                        ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.openEditFolderModal(this.currentStructTreeContextMenuNode)}}},'重新命名')
                        : null,
                        (this.currentStructTreeContextMenuNode.NodeType=='merge')
                        ? h('li',{ class:'ivu-dropdown-item',on:{'click':(e)=>{e.stopPropagation();this.deleteFolderModal(this.currentStructTreeContextMenuNode)}}},'刪除')
                        : null
                     ])
                ])
                :null
            ])
    ]
},


// 右鍵節點
handleMergeTreeContextMenu (node) {
    let that = this;
    // 處理資料
    this.currentStructTreeContextMenuNode = node;
    this.customIviewTreeContextmenuStatus = true;
    // 建立監聽（點選頁面內任意空白區域關閉右鍵選單）
    let hiddenStructTreeContextMenu = function(e){
        that.customIviewTreeContextmenuStatus = false;
        document.body.removeEventListener("click",hiddenStructTreeContextMenu,false);
    }
    document.body.addEventListener("click",hiddenStructTreeContextMenu,false);
},


// 樣式
.custom-iview-tree-contextmenu {
    position: absolute;
    will-change: top, left;
    transform-origin: center top;
    top: 20px;
    left: 0;
}

    .custom-iview-tree-contextmenu .ivu-dropdown-item:hover {
        color: #2d8cf0;
    }