vue antd tree控件右键点击菜单实现增删改查

最新推荐文章于 2024-07-07 13:59:06 发布

麻辣_水煮鱼

最新推荐文章于 2024-07-07 13:59:06 发布

阅读量5.7k

点赞数 2

分类专栏： vue antd 文章标签： antd树控件右键功能菜单右键点击菜单实现增删改查

本文链接：https://blog.csdn.net/weixin_42217154/article/details/112647854

版权

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

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

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

根据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

最低0.47元/天解锁文章

麻辣_水煮鱼

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
vue antd tree控件右键点击菜单实现增删改查

今天实现的是，树形控件右键点击会出现操作菜单，增加、修改、删除按钮会弹出相应的操作弹窗。根据ant design vue 的右键点击事件rightClick 来控制菜单的显示和隐藏就简单了效果如下：（样式还没写，所以比较简单）代码如下//树结构<a-directory-tree :tree-data="filetreeData" @rightClick="onRightClick" ></a-directory-tree>//功能菜单.
复制链接

扫一扫

专栏目录