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

最新推荐文章于 2025-01-24 17:31:00 发布

喝着绿茶的猫

最新推荐文章于 2025-01-24 17:31:00 发布

阅读量1.2w

点赞数 6

分类专栏： react

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

版权

使用Ant Design React的右键点击API，结合树结构，实现了右键操作包括增加、删除和修改的功能。点击操作图标后会弹出相应的操作窗口。示例代码展示了关键实现部分。

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

实现思路：
ant design react 有一个右键点击的APIonRightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。

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

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

在这里插入图片描述

部分代码实现：

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

html:

    return (
         <Card bordered={false}  onClick={this.clearMenu}>
        <Alert type="info" showIcon message="左键点击组织可查看该组织下的人员，右键点击该组织可以进行添加、修改、删除操作" type="info" />
        <div  className={styles.organizationCard}>
        <div className={styles.leftBox}>
           <Tree
            onSelect={this.onSelect}
            selectedKeys={this.state.selectedKeys}
            onRightClick={this.onRightClick}
            defaultExpandAll
          >
            {this.renderTreeNodes(organizationData)}
          </Tree>
          {this.state.NodeTreeItem != null ? this.getNodeTreeMenu() : ""}
        </div>
      </Card>
      ）

js:

  state = {
   
    selectedKeys: [],   //选择的树菜单
    NodeTreeItem: null, //右键菜单
    visible: false,     //是否显示modal 新建组织或者修改组织
    current:undefined

最低0.47元/天解锁文章