antd实现树形分类

最新推荐文章于 2024-02-02 15:19:06 发布

reg183

最新推荐文章于 2024-02-02 15:19:06 发布

阅读量195

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chendongpu/article/details/115176238

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

这篇博客展示了如何在React应用中实现一个带有图标显示和全展开功能的树形组件。通过使用`Tree`组件，可以创建包含多个层级的分类结构，如美妆、母婴和洗护等。文章还提到了添加新分类的功能，使用了`Card`和`Button`组件进行展示。

摘要由CSDN通过智能技术生成

效果如下:

代码实现

    render() {

        let tree=[
            {

                "children": [
                    {
                        "children": [],
                        "title": "护肤",
                        "key": 2
                    },
                    {
                        "children": [],
                        "title": "彩妆",
                        "key": 3
                    },
                    {
                        "children": [
                            {
                                "children": [],
                                "title": "222",
                                "key": 11
                            }
                        ],
                        "title": "111",
                        "key": 10
                    }
                ],
                "title": "美妆",
                "key": 1
            },
            {
                "children": [
                    {
                        "children": [],
                        "title": "奶粉",
                        "key": 5
                    },
                    {
                        "children": [],
                        "title": "童装",
                        "key": 6
                    }
                ],
                "title": "母婴",
                "key": 4
            },
            {
                "children": [
                    {
                        "children": [],
                        "title": "洗发护发",
                        "key": 8
                    },
                    {
                        "children": [],
                        "title": "个人护理",
                        "key": 9
                    }
                ],
                "title": "洗护",
                "key": 7
            }
        ];


        return (

            <Card
                extra={
                <Button type="primary" size="small" >添加分类</Button>
            }
            >

                <Tree
                    showIcon
                    defaultExpandAll
                    defaultSelectedKeys={[]}
                    switcherIcon={<DownOutlined />}
                    treeData={tree}
                />
            </Card>
        )
    }