react➕antd【树形列表,右键出现菜单】

1,列表上右键事件 treeNodeonRightClick,代码中有2,自定义右键菜单内容 getNodeTreeRightClickMenu,代码中有3,return下面写入右键菜单内容 {this.getNodeTreeRightClickMenu()}4,效果图5,详细代码import React, { PureComponent } from 'react'...
摘要由CSDN通过智能技术生成

 1,列表上右键事件  treeNodeonRightClick,代码中有

2,自定义右键菜单内容 getNodeTreeRightClickMenu,代码中有

3,return下面写入右键菜单内容 {this.getNodeTreeRightClickMenu()}

4,效果图

5,详细代码

import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import moment from 'moment';
import { Link } from 'react-router-dom';
import { connect } from 'dva';
import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Badge, Dropdown, Tree, Menu, Popover, } from 'antd';
import styles from './departmentList.less';

const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const SelectOption = Select.Option;
const { Sear
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Antd是一款基于React框架的UI组件库,其中包括了树形组件。在实现增删改查的功能方面,Antd树形组件可以非常方便地应用。 首先,对于增加节点的功能,Antd树形组件提供了一个方法——onAdd,通过该方法可以添加一个新节点,例如: ``` onAdd = (parentId) => { const { treeData } = this.state; const parent = findNodeById(treeData, parentId); const newChild = { id: uuid(), title: 'New Node', children: [] }; parent.children.push(newChild); this.setState({ treeData }); } ``` 其次,对于删除节点的功能,Antd树形组件同样提供了一个方法——onRemove,通过该方法可以删除指定节点,例如: ``` onRemove = (nodeId) => { const { treeData } = this.state; const parent = findParentNode(treeData, nodeId); parent.children = parent.children.filter((child) => child.id !== nodeId); this.setState({ treeData }); } ``` 在实现修改节点的功能方面,Antd树形组件可以实现节点的编辑功能,可以通过双击节点文字来实现编辑。 最后,在实现查找节点的功能方面,Antd树形组件提供了相关的方法供开发人员使用,例如: ``` findNodeById(treeData, id) { for (let i = 0; i < treeData.length; i++) { const node = treeData[i]; if (node.id === id) { return node; } else if (node.children.length > 0) { const foundNode = this.findNodeById(node.children, id); if (foundNode) { return foundNode; } } } return null; } ``` 总的来说,借助Antd树形组件,实现增删改查的功能非常方便。实现这些功能的关键是要深入了解Antd树形组件的API,并结合业务需求进行开发。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值