vue antd tree控件右键点击菜单实现增删改查_antdtree整行都能右键菜单vue3rightclick-优快云博客

本文介绍了如何在Vue中利用Ant Design Vue的tree组件，通过监听rightClick事件来创建右键点击菜单，实现树节点的增删改查功能。文中展示了简单的实现效果及关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天实现的是，树形控件右键点击会出现操作菜单，增加、修改、删除按钮会弹出相应的操作弹窗。

根据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(){}