antdesignreact右键点击菜单实现树tree增删改查

antdesignreact右键点击菜单实现树tree增删改查

2023年6月22日发(作者:)

antdesignreact右键点击菜单实现树tree增删改查实现思路:ant design react 有⼀个右键点击的APIonRightClick, 所以想⾃⼰扩展基于树结构的增删改查功能还是蛮简单的。我这⾥实现的是,右键点击会出现操作图标,增加、删除按钮会弹出相应的操作弹窗。效果展⽰:部分代码实现:因为项⽬⾥还有设计其他的业务逻辑,这⾥只展⽰了核⼼代码。html: return (

{TreeNodes(organizationData)} {eeItem != null ? eTreeMenu() : ""}
)js: state = { selectedKeys: [], //选择的树菜单 NodeTreeItem: null, //右键菜单 visible: false, //是否显⽰modal

新建组织或者修改组织 current:undefined //当前需要修改的项 }; componentDidMount() { //

请求树菜单接⼝ }onSelect = (selectedKeys, info) => { const { dispatch } = ; if( === 0){ (+'') } dispatch({ type: 'jurisdiction/fetchOrganizationUser', payload: { id: }, }); te({selectedKeys}) (edKeys); } onRightClick = ({event,node}) => { var x = Left + Width; var y = Top ; te({ NodeTreeItem: { pageX: x, pageY: y, id: ey, name: , category: ry } }); } renderTreeNodes = data => ((item) => { //

这个根据⾃⼰返回的接⼝数据格式来修改 if () { return ( {TreeNodes()} ); } return }) getNodeTreeMenu() { const {pageX, pageY} = {...eeItem}; const tmpStyle = { position: 'absolute', maxHeight: 40, textAlign: 'center', left: `${pageX + 10}px`, top: `${pageY}px`, display: 'flex', flexDirection: 'row', }; const menu = (

{ry === 1?'':(
)}
); return (eeItem == null) ? '' : menu; } clearMenu = () => { te({ NodeTreeItem: null }) } handleAddSub = () => { //

写⾃⼰的业务逻辑 }

handleEditSub = () => { //

写⾃⼰的业务逻辑 } handleDeleteSub = () => { //

写⾃⼰的业务逻辑 }

}

发布者:admin,转转请注明出处:http://www.yc00.com/xiaochengxu/1687381142a5785.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信