echarts tree【樹形列表，右鍵出現菜單】

【轉】：https://blog.csdn.net/xh_960125/article/details/89850928
 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 { Search, TextArea } = Input;
const { TreeNode } = Tree;
const treeData = [{}];
 
@Form.create()
class DepartmentList extends PureComponent {
  state = {
    expandedKeys: ['1', '2', '4'],
    autoExpandParent: true,
    checkedKeys: [],
    selectedKeys: [],
    value2: 'Apple',
    treeData: [],
    department_id: '',
    rightClickNodeTreeItem: {
      pageX: '',
      pageY: '',
      id: '',
      categoryName: '',
    },
    display: 'block',
  };
 
  componentDidMount() {
    const departmentsListTree = this.props.departmentList;
    this.setState({
      treeData: departmentsListTree,
    });
  }
// 展開
  onExpand = (expandedKeys, expanded, record) => {
    // console.log('onExpand', expandedKeys);
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };
 
  // 選擇節點
  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    const departmentId = info.selectedNodes[0].props.dataRef.id;
    // console.log('departmentId', departmentId);
    const { dispatch } = this.props;
    dispatch({ type: 'department/userRole', payload: { department_id: departmentId } });
    // console.log('id',info.selectedNodes[0].props.dataRef.id);
  };
 
  // 讀取子節點
  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.name} key={item.id}  dataRef={item} data-key={item.id}  data-title={item.categoryName} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} />;
    });
 
// tree列表上右鍵事件
  treeNodeonRightClick = e => {
    this.setState({
      display: 'block',
      rightClickNodeTreeItem: {
        pageX: e.event.pageX,
        pageY: e.event.pageY,
        id: e.node.props['data-key'],
        categoryName: e.node.props['data-title'],
      },
    });
    // console.log("id::",e.node.props["title"])
  };
 
  // 點擊取消隱藏
  hideRight = e => {
    this.setState({
      display: 'none',
    });
    console.log(this.state);
  };
 
  // 自定義右鍵菜單內容
  getNodeTreeRightClickMenu = () => {
    // alert(33)
    const { pageX, pageY, id } = { ...this.state.rightClickNodeTreeItem };
    // console.log("右鍵菜單id:",id);
    const tmpStyle = {
      position: 'absolute',
      left: `${pageX + 40}px`,
      top: `${pageY - 12}px`,
      display: this.state.display,
    };
    const menu = (
      <div style={tmpStyle} className={styles.selfrightmenu} onMouseLeave={this.hideRight}>
        <Link to={{ pathname: '/SetUp/department/edit', query: { id: id } }}>
          <a>編輯</a>
        </Link>
        <Popconfirm title="確定刪除此記錄?" onConfirm={() => this.deleteDepartment(id)}>
          <a href="javascript:;"><a>刪除</a></a>
        </Popconfirm>
 
        <Link to={{ pathname: '/SetUp/userSet/edit', query: { department_id: id } }}>
          <a href="javascript:;">添加用戶</a>
        </Link>
        <Link to={{ pathname: '/SetUp/department/edit', query: { parent_id: id } }}>
          <a style={{ borderBottom: '1px solid gainsboro', paddingBottom: '10px', display: ' block', }}>添加部門</a>
        </Link>
        <Button onClick={this.hideRight} style={{ marginLeft: '15px', marginTop: '10px' }}>取消</Button>
      </div>
    );
    return this.state.rightClickNodeTreeItem == null ? '' : menu;
  };
 
render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 20 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 12 },
      },
    };
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    const modalVisible = this.props.modalVisible;
    const { dispatch } = this.props;
    const departmentsListTree = this.props.departmentList;
    const { checkedKeys, selectedValue, treeData, checkNodes, expandedKeys } = this.state;
 
    return (
      <div className={styles.listback}>
        <div style={{ width: '35%', float: 'left' }}>
          <h3>部門樹</h3>
          <Tree
            showLine
            expandedKeys={this.state.expandedKeys}
            onSelect={this.onSelect}
            onExpand={this.onExpand}
            onRightClick={this.treeNodeonRightClick}
          >
            {this.renderTreeNodes(departmentsListTree)}
          </Tree>
          {this.getNodeTreeRightClickMenu()}
        </div>
 
     
      </div>
    );
  }
}
function mapStateToProps(state) {
  return { ...state.department };
}
export default connect(mapStateToProps)(DepartmentList);