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

最新推荐文章于 2025-07-11 17:34:59 发布

原创最新推荐文章于 2025-07-11 17:34:59 发布 · 1.7w 阅读

26 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用AntDesignVue实现树形结构的增删改查功能，通过右键菜单进行操作，并自定义样式。文章包含核心代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：

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" v-if="this.NodeTreeItem">
          <div class="menu-item" @click="orgAdd">
            <a-tooltip placement="bottom" title="新增子组织">
              <a-icon type="plus-circle-o" />
            </a-tooltip>
          </div>
          <div class="menu-item" @click="orgEdit">
            <a-tooltip placement="bottom" title="修改">
              <a-icon type="edit" />
            </a-tooltip>
          </div>
          <div class="menu-item" @click="orgDelete" v-if="this.NodeTreeItem.parentOrgId">
            <a-tooltip placement="bottom" title="删除">
              <a-icon type="minus-circle-o" />
            </a-tooltip>
          </div>
        </div>
</a-card>

js:

export default {
  data () {
    return {
      NodeTreeItem: null, // 右键菜单
      tmpStyle: '',
      treeData: []
     }
  },
  methods: {
    onSelect (selectedKeys, info) {
      this.queryParam = {
        orgId: selectedKeys[0]
      };
      // 写自己的业务逻辑
      // this.$refs.table.refresh(true);
    },
    onRightClick ({ event, node }) {
      const x =
        event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
      const y = event.currentTarget.offsetTop;
      this.NodeTreeItem = {
        pageX: x,
        pageY: y,
        id: node._props.eventKey,
        title: node._props.title,
        parentOrgId: node._props.dataRef.parentOrgId || null
      };
      this.tmpStyle = {
        position: 'absolute',
        maxHeight: 40,
        textAlign: 'center',
        left: `${x + 10 - 0}px`,
        top: `${y + 6 - 0}px`,
        display: 'flex',
        flexDirection: 'row'
      };
    },
    // 用于点击空白处隐藏增删改菜单
   clearMenu () {
      this.NodeTreeItem = null;
    },
    orgAdd () {
     // 写自己的业务逻辑
    },
    orgEdit () {
    // 写自己的业务逻辑
    },
    orgDelete () {
    // 写自己的业务逻辑
    }

...
}