前言:

项目中使用antd-Tree组件(树形组件),要求默认展开编辑时默认选中,但是展开之后在点击收缩,和选中就无法选中了。必须配合onExpand和onCheck事件。

一、项目环境

react: 16 

antd :3.x (本篇内容也适用于antd 4x版本)

二、使用Tree

        业务要求:

               默认展开树结构,编辑时勾中已选中的

  1. 引入Tree和TreeNode
  2. 写生成树结构函数
  3. 添加展开key值和选中key值

代码如下:

  一般不会使用defaultCheckedKeys和defaultExpandedKeys,要实现业务要求,需要expandedKeys和onExpand、checkedKeys和onCheck结合使用。

import React, { Component } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ],
            expandedKeys: [], //展开的key值
            autoExpandParent: true,
            checkedKeys: [3] //选中的key
        }
    }
    componentDidMount() {
        this.expandedKeysFn();
    }

    renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
        return data.map((item) => {
            if (item.children && item.children.length > 0) {
                return <TreeNode title={item.title} key={item.key} >
                    {
                        this.renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} {...item}></TreeNode>
        })
    }
    expandedKeysFn = () => {
        let { data } = this.state;
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        this.setState({
            expandedKeys: arr
        })
    }
    render() {
        let { data, expandedKeys, autoExpandParent, checkedKeys } = this.state;
        return (
            <div>
                <Tree
                    checkable
                    expandedKeys={expandedKeys} //默认展开的key
                    autoExpandParent={autoExpandParent} //是否自动展开父节点
                    checkedKeys={checkedKeys} //选中的key
                >
                    {this.renderTreeNode(data)}
                </Tree>
            </div>
        );
    }
}

export default Index

只用expandedKeyscheckedKeys的问题   无法收缩和选中了。

三、解决方案:

import React, { Component } from 'react';
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ],
            expandedKeys: [], //展开的key值
            autoExpandParent: true,
            checkedKeys:[3] //选中的key
        }
    }
    componentDidMount() {
        this.expandedKeysFn();
    }

    renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
        return data.map((item) => {
            if (item.children && item.children.length > 0) {
                return <TreeNode title={item.title} key={item.key} >
                    {
                        this.renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} {...item}></TreeNode>
        })
    }
    expandedKeysFn = () => { 
        let { data } = this.state;
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        this.setState({
            expandedKeys: arr
        })
    }
    onExpand = expandedKeys => { //展开事件
        console.log('onExpand', expandedKeys);
        this.setState({
          expandedKeys,
          autoExpandParent:false
        });
      };
      onCheck=(checkedKeys)=>{ //选中事件
          this.setState({checkedKeys})
      }
    render() {
        let { data, expandedKeys,autoExpandParent,checkedKeys } = this.state;
        return (
            <div>
                <Tree
                    checkable
                    expandedKeys={expandedKeys} //默认展开的key
                    onExpand={this.onExpand} //展开事件
                    autoExpandParent={autoExpandParent} //是否自动展开父节点
                    checkedKeys={checkedKeys} //选中的key
                    onCheck={this.onCheck} //选中事件
                >
                    {this.renderTreeNode(data)}
                </Tree>
            </div>
        );
    }
}

export default Index

需要注意:

expandedKeys 的类型也很重要,比如下面key是number类型expandedKeys也必须是数字expandedKeys=[1,2],如果是这样xpandedKeys=["1","2"]也不会生效

     具体可以看看这篇博客:

https://blog.csdn.net/weixin_44058725/article/details/116983437#comments_19433765icon-default.png?t=LA92https://blog.csdn.net/weixin_44058725/article/details/116983437#comments_19433765

官网例子在线演示:这个实例中key 175的type为number,key 176是字符串 当expandedKeys=["175",176] key 175就无法展开而key 176可以因展开为类型相同。当expandedKeys=["175",176]这样key 175也可以展开了。具体可以看antd tree expandedKeys注意事项

data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 3,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 9,
                        }
                    ]
                }
            ]

四、总结:

antd跟默认相关的前缀有default的都只是第一次有用,第二次就没用了。比图input默认值,checkbox值等。都必须结合事件触发。

关于antd树形Table可以看这篇博客:

react-antd table树形数据默认展开行实现

antd-tree组件带搜索框的使用及踩坑(只标红)

antd-tree组件带搜索框的使用及踩坑(只保留搜索的内容并且标红)

参考antd Tree API

antd Tree组件api

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐