antd Tree 实现每个分组只能选一个效果

最新推荐文章于 2024-09-26 21:52:31 发布

原创最新推荐文章于 2024-09-26 21:52:31 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

react 同时被 2 个专栏收录

29 篇文章

订阅专栏

antd

11 篇文章

订阅专栏

本文展示了如何在React中使用Ant Design库的Tree组件，实现可展开的多级节点，并包含选中状态管理和事件处理。通过实例代码，学习者可以快速掌握如何构建一个可交互的树形数据结构。

效果图

在这里插入图片描述

代码

import { Tree } from 'antd';
const { TreeNode } = Tree;

const treeData = [
    {
        title: '0-0',
        key: '0-0',
        children: [
            {
                title: '0-0-0',
                key: '0-0-0',
            },
            {
                title: '0-0-1',
                key: '0-0-1',
            },
            {
                title: '0-0-2',
                key: '0-0-2',
            },
        ],
    },
    {
        title: '1-1',
        key: '1-1',
        children: [
            { title: '1-1-0', key: '1-1-0' },
            { title: '1-1-1', key: '1-1-1' },
            { title: '1-1-2', key: '1-1-2' },
        ],
    },
];


class Demo extends React.Component {
    state = {
        expandedKeys: ['0-0', '1-1'],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
    };

    onExpand = expandedKeys => {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys);
        if (checkedKeys.length > 0) {
            let head = checkedKeys[checkedKeys.length - 1].slice(0, 3)
            let list = []
            checkedKeys.map((item, index) => {
                if (item.indexOf(head) != '-1') {
                    list = [...list, index]
                }
            })
            if (list.length == 2) {
                checkedKeys.splice(list[0], 1)
            }
        }
        this.setState({
            checkedKeys
        })
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode checkable={false} title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} {...item} />;
        });

    render() {
        return (
            <Tree
                checkable
                onExpand={this.onExpand}
                expandedKeys={this.state.expandedKeys}
                autoExpandParent={this.state.autoExpandParent}
                onCheck={this.onCheck}
                checkedKeys={this.state.checkedKeys}
                selectedKeys={this.state.selectedKeys}
            >
                {this.renderTreeNodes(treeData)}
            </Tree>
        );
    }
}
export default Demo