The right-click menu of the vue antd tree control realizes addition, deletion, modification and checking

What is achieved today is that right-clicking on the tree control will bring up an operation menu, and the add, modify, and delete buttons will pop up corresponding operation pop-up windows.

It is simple to control the display and hide of the menu according to the right click event of ant design vue,  rightClick

The effect is as follows: (The style has not been written yet, so it is relatively simple)

code show as below

//树结构
<a-directory-tree
    :tree-data="filetreeData"
    @rightClick="onRightClick" 
>
</a-directory-tree>
//功能菜单
<div :style="this.tmpStyle" v-if="this.NodeTreeItem">
    <a-button type="primary" title="添加" icon="plus" size="small" @click="orgAdd " />
    <a-button type="primary" title="编辑" icon="edit" size="small" @click="orgEdit " />
    <a-button type="primary" title="删除" icon="delete" size="small" @click="orgDelete " />
</div>

 

    //右键点击事件    
    onRightClick ({event, node}) {
      const x = event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
      const y = event.currentTarget.offsetTop;
      this.NodeTreeItem = {
        pageX: x,
        pageY: y,
        id: node._props.eventKey,
        title: node._props.title,
        parentOrgId: node._props.dataRef.key || null
      };
      
      this.tmpStyle = {
        position: 'absolute',
        maxHeight: 40,
        textAlign: 'center',
        left: `${x + 10 - 0}px`,
        top: `${y + 4 - 0}px`,
        display: 'flex',
        flexDirection: 'row'
      };
    },
    // 用于点击空白处隐藏增删改菜单
    clearMenu () {
      this.NodeTreeItem = null;
    },
    orgAdd(){},
    orgEdit(){},
    orgDelete(){}