Tree 组件

Tree 组件是一个可复用的树形结构组件，适用于展示和选择层级数据。它支持多选和单选功能，适合用于文件管理、分类选择等场景。

安装

您可以通过 npm 或 yarn 安装该组件：

npm install component-aixli-ui

或

yarn add component-aixli-ui

使用示例

import React, { useState } from 'react';
import Tree from 'component-aixli-ui';

const App = () => {
    const [data, setData] = useState([
        {
            id: 1,
            name: '节点 1',
            selected: false,
            children: [
                { id: 2, name: '子节点 1-1', selected: false },
                { id: 3, name: '子节点 1-2', selected: false },
            ],
        },
        {
            id: 4,
            name: '节点 2',
            selected: false,
            children: [],
        },
    ]);

    const handleChange = (node) => {
        console.log('选中的节点:', node);
    };

    return <Tree data={data} onChange={handleChange} />;
};

export default App;

属性

| 属性 | 类型 | 描述 | |-----------|--------------------|--------------------------| | data | TreeNode[] | 树形数据源 | | onChange| (node: TreeNode) => void | 节点状态变化时的回调函数 |

TreeNode 类型

interface TreeNode {
    id: number | string;
    name: string;
    selected: boolean;
    children?: TreeNode[];
}

贡献

欢迎提交问题和请求合并！请确保在提交之前检查现有的 issue 和 pull request。

许可证

该项目使用 MIT 许可证。有关详细信息，请参阅 LICENSE 文件。