a-tree 实现右键点击添加操作项

最新推荐文章于 2023-12-04 10:40:18 发布

onlylele

最新推荐文章于 2023-12-04 10:40:18 发布

阅读量932

点赞数

分类专栏： AntDesignVue 和 vxe-table 文章标签： html javascript anti-design-vue

本文链接：https://blog.csdn.net/onlylele/article/details/130637930

版权

本文介绍了如何在a-tree组件上实现右键点击，弹出包含添加、编辑和删除等业务操作的菜单项。通过视图和业务逻辑代码的展示，详细解释了具体实现过程。

摘要由CSDN通过智能技术生成

1、业务实现：通过右键点击菜单任务项可以显示对应的添加，编辑，删除等业务操作项的功能；

具体效果如下所示：

2、具体实现代码如下：

视图部分

<div class="task-tree"> 
        <!--  可编辑 -->
        <a-dropdown :trigger="['contextmenu']"> 
            <a-menu slot="overlay">
                <a-menu-item key="1" @click="handleRightClick(NodeTreeItem.id, NodeTreeItem.title, 1)">新增</a-menu-item>
                <a-menu-item key="2" @click="handleRightClick(NodeTreeItem.id, NodeTreeItem.title, 2)">编辑</a-menu-item>
                <a-menu-item key="3" @click="handleRightClick(NodeTreeItem.id, NodeTreeItem.title, 3)">删除</a-menu-item>
            </a-menu>
            <a-tree   
                ref="tree" 
                :auto-expand-parent="true"
                :tree-data="treeData" 
                :expandedKeys.sync="expandedKeys" 
                default-expand-all 
                :replaceFields="{chil