vue antdツリーコントロールの右クリックメニューは、追加、削除、変更、およびチェックを実現します

今日達成されていることは、ツリーコントロールを右クリックすると操作メニューが表示され、[追加]、[変更]、および[削除]ボタンが対応する操作ポップアップウィンドウをポップアップすることです。

ant design vueの右クリックイベントrightClickに従って、メニューの表示と非表示を簡単に制御できます。 

効果は次のとおりです（スタイルはまだ書かれていないので、比較的シンプルです）

コードは以下のように表示されます

//树结构
<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(){}