iview tree render 自定义右键菜单（解决部分场景下官网tree右键菜单bug）

// 树组件
<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;
    }

标签：菜单,dropdown,tree,click,ivu,右键,currentStructTreeContextMenuNode,class
来源： https://www.cnblogs.com/sangzs/p/15127238.html