ant design vue 右键点击菜单实现树tree 增删改查

最新推荐文章于 2025-02-04 16:07:35 发布

喝着绿茶的猫

最新推荐文章于 2025-02-04 16:07:35 发布

阅读量1.7w

点赞数 11

分类专栏： Vue

本文链接：https://blog.csdn.net/luyu13141314/article/details/88993789

版权

实现思路：

vue的实现思路和前面写的react版本的是一样的…

ant design vue 有一个右键点击的API @rightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。

我这里实现的是，右键点击会出现操作图标，增加、删除按钮会弹出相应的操作弹窗。

因为本人觉得这个增删改菜单长得实在是太丑了，所以我对样式进行了改造，具体可以看下一篇文章：点击查看。

效果展示：
在这里插入图片描述

在这里插入图片描述

部分代码实现：

因为项目里还有设计其他的业务逻辑，这里只展示了核心代码。

html:

  <a-card :bordered="false" @click="clearMenu" class="card-box">
        <a-tree
          v-if="treeData.length>0"
          :treeData="treeData"
          :defaultExpandAll="true"
          @select="this.onSelect"
          @rightClick="this.onRightClick"
        ></a-tree>
        <div :style="this.tmpStyle