antd tree相关操作:selected要把子集也赋值给checkedKeys,右键 菜单操作

selected要把子集也赋值给checkedKeys,右键 菜单显示,隐藏右键菜单可以设置遮罩层,点击遮罩层隐藏

// 左键函数:注意把selectedKeys下的子集也要赋给checkedKeys
onSelect = (selectedKeys,e) => {
    const childrenKeys = e.node.getNodeChildren().map(item => item.key)
    this.setState({ checkedKeys: selectedKeys.length > 0 ? 
    selectedKeys.concat(childrenKeys) : selectedKeys, selectedKeys });

};

// 选择复选框触发函数
onCheckTree = (checkedKeys, checkedNodes) => {
    this.setState({
      checkedKeys,
};

// 右键触发函数
rightClickTree = e => {
    this.setState({
      rightClickData: e.node.props.dataRef,
      checkedKeys: [],// 复选框清空
      selectedKeys: [e.node.props.dataRef.id],// 右键的节点设置selected
      contextMenuVisiable: true,// 显示右键菜单
      contextMenuStyle: { top: e.event.clientY, left: e.event.clientX },// 右键菜单位置
    });
  };

// 树结构
<Tree
 checkable
 multiple
 onCheck={this.onCheckTree}
 onSelect={this.onSelect}
 checkedKeys={checkedKeys}
 selectedKeys={selectedKeys}
 onRightClick={this.rightClickTree}
>

// 右键菜单
<Fragment>
  {contextMenuVisiable && (
   <div className={styles.contextMenu} style={{ ...contextMenuStyle, position: 'fixed' 
   }}>右键菜单。。。各种操作</div>
  )}
<Fragment>

              

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值