实现思路:
vue的实现思路和前面写的react版本的是一样的…
ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。
我这里实现的是,右键点击会出现操作菜单面板,点击新增、编辑、删除按钮会弹出相应的操作弹窗。
右键单击出现的菜单是用v-contextmenu实现的
v-contextmenu文档说明:https://github.com/snokier/v-contextmenu
效果展示:


部分代码实现:
因为项目里还有设计其他的业务逻辑,这里只展示了核心代码。
首先把v-contextmenu引入项目,这里不多说了,GitHub上面写的很详细
在main.js 把v-contextmenu引入
import contentmenu from 'v-contextmenu'
import 'v-contextmenu/dist/index.css'
Vue.use(contentmenu)
html:
<a-card :bordered="false" class="card-box">
<div class="left" id="left">
<a-tree
v-if="treeData.length>0"
:treeData=

本文介绍如何使用Ant Design Vue和v-contextmenu实现树形组件的右键点击增删改查功能。通过右键点击树节点,展示操作菜单,点击菜单项弹出相应操作窗口。核心代码包括组件引入、HTML结构、JS逻辑和LESS样式。注意父级元素定位问题,以确保菜单位置正确。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



