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; }