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.childrenfor (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 draggableclassName="hide-file-icon" checkStrictlycheckedKeys={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":[]}]}
]

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！