实现思路:
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=