React Ant Design Tree树形控件 点击控制全部展开和全部收起

React Ant Design Tree树形控件 点击控制全部展开和全部收起

import { message, Tree } from 'antd';
import IconFont from '@/components/IconFont';
import React, { Fragment, PureComponent } from 'react';
import styles from './SelectTree.less';
import TreeOperate from "@/components/case/TreeOperate";
import { connect } from 'dva';
import { getQueryVariable } from '@/utils/fun'

const TreeNode = Tree.TreeNode;

@connect((state) => {
  return { ...state.testcase };
})

class SelectTree extends PureComponent {
  state = {
    autoExpandParent: true,
    projectsId:getQueryVariable('projectsId'),
  };

  componentDidMount() {
    this.init()
    this.props.onRef(this)
  }

  init = () => {
    const projectsId = getQueryVariable('projectsId');
    this.props.dispatch({
      type: 'testcase/fetchCaseTree',
      payload: { projectsId, menuType: 1, name: '' }
    })
  }

  onCheck = (keys) => {
    this.props.dispatch({
      type: 'testcase/onCheck',
      payload: { keys: keys.checked ? keys.checked : keys }
    })
  }

  subKeys = (data, key, result) => {
    data.forEach(v => {
      if (v.children) {
        this.subKeys(v.children, result);
      }
    })
    return result;
  }

  //展开具体某个的方法
  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  deepTraversa = (node, nodeList = []) => {
    if (node !== null) {
      nodeList.push(node.key + '')
      let children = node.children
      for (let i = 0; i < children.length; i++) {
        this.deepTraversa(children[i], nodeList)
      }
    }
    return nodeList
  }

//展开全部
  onExpandAll = () => {
    const { caseDate } = this.props;
    const expandedKeys = [];
    caseDate.forEach(item => {
      expandedKeys.push(this.deepTraversa(item))
    })
    this.setState({
      expandedKeys: expandedKeys.flat()
    });
  }

//收起全部
  onExpandClose = () => {
    this.setState({
      expandedKeys: []
    });
  }

  onDrop = ({ event, node, dragNode, dragNodesKeys}) =>{
    console.log('拖拽')
  }

  render() {
    const { caseDate, checkedKeys } = this.props;
    const { expandedKeys, autoExpandParent } = this.state;

    const IconFolder = ({ k }) => <IconFont type="icon-wenjianjia3" className={styles.icon_title} onClick={() => {
      const subKeys = this.subKeys(caseDate, k, []);
      this.onCheck({ checked: [...checkedKeys.checked.filter(v => subKeys.indexOf(v) === -1), ...subKeys.filter(v => checkedKeys.checked.indexOf(v) === -1)] })
    }} />

    const getData = (data, key = null) => {
      const newData = data || []
      return newData.map((item, index) => {
        if (item.children && item.node_type === "menu") {
          return (
            <TreeNode title={<TreeOperate title={item.title} sourceData={item} ></TreeOperate>} selectable={false}
              key={item.key}
              icon={<IconFolder k={item.key} />} checkable={false}>
              {getData(item.children, item.key)}
            </TreeNode>
          )
        }
      })
    }

    return (
      <div style={{ overflowY: 'auto', height: '500px' }}>
        <Tree checkable showLine showIcon blockNode draggable
          className="hide-file-icon" checkStrictly
          checkedKeys={checkedKeys.checked}
          onCheck={this.onCheck}
          onDrop={this.onDrop}
          expandedKeys={expandedKeys}
          onExpand={this.onExpand}
          autoExpandParent={autoExpandParent}>
          {getData(caseDate)}
        </Tree>
      </div>
    )
  }
}

export default SelectTree;

后端数据结构

{
“code”:200,
“data”:[
{
“key”:1,
“projects_id”:12,
“title”:“一级菜单324”,
“parent_id”:0,
“sort”:1,
“count”:0,
“node_type”:“menu”,
“node_name”:"",
“deep”:1,
“children”:[
{
“key”:27,
“projects_id”:12,
“title”:“hello1”,
“parent_id”:1,
“sort”:0,
“count”:0,
“node_type”:“menu”,
“node_name”:"",
“deep”:2,
“children”:[

                ]
            }
        ]
    },
    {
        "key":10,
        "projects_id":12,
        "title":"hello776",
        "parent_id":0,
        "sort":0,
        "count":0,
        "node_type":"menu",
        "node_name":"",
        "deep":1,
        "children":[

        ]
    },
    {
        "key":11,
        "projects_id":12,
        "title":"234",
        "parent_id":0,
        "sort":0,
        "count":0,
        "node_type":"menu",
        "node_name":"",
        "deep":1,
        "children":[
            {
                "key":14,
                "projects_id":12,
                "title":"helloworld",
                "parent_id":11,
                "sort":0,
                "count":0,
                "node_type":"menu",
                "node_name":"",
                "deep":2,
                "children":[

                ]
            }
        ]
    }
]

}