Tree 树形组件

规则

基础示例

const rule = {
    type:"tree",
    title:"权限",
    field:"rule",
    value:[],
    props:{
        data:[],
        fieldNames: {
            key: 'id',
            title: 'title',
            children: 'children'
        }
    }
}

Props 配置示例

可勾选树

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: '用户管理',
                children: [
                    { key: 11, title: '查看用户' },
                    { key: 12, title: '编辑用户' },
                ]
            },
            {
                key: 2,
                title: '系统设置',
                children: [
                    { key: 21, title: '基础设置' },
                    { key: 22, title: '高级设置' },
                ]
            }
        ],
        checkable: true,
        checkStrictly: false,
        checkedStrategy: 'all',
    }
}

可选中树

const rule = {
    type:"tree",
    title:"菜单选择",
    field:"menu",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: '首页',
            },
            {
                key: 2,
                title: '系统管理',
                children: [
                    { key: 21, title: '用户管理' },
                    { key: 22, title: '角色管理' },
                ]
            }
        ],
        selectable: true,
        multiple: true,
    }
}

默认展开全部

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: '用户管理',
                children: [
                    { key: 11, title: '查看用户' },
                ]
            }
        ],
        checkable: true,
        defaultExpandAll: true,
    }
}

异步加载

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: '用户管理',
                isLeaf: false,
            }
        ],
        checkable: true,
    },
    inject: true,
    on: {
        'load-more': ($inject, node) => {
            // 异步加载子节点数据
            return new Promise((resolve) => {
                loadTreeData(node.key).then(res => {
                    node.children = res.data.map(item => ({
                        key: item.id,
                        title: item.name,
                        isLeaf: !item.hasChildren
                    }));
                    resolve();
                });
            });
        },
    },
}

Events 事件示例

监听勾选和选中变化

const rule = {
    type:"tree",
    title:"权限选择",
    field:"permissions",
    value:[],
    props:{
        data: [
            {
                key: 1,
                title: '用户管理',
                children: [
                    { key: 11, title: '查看用户' },
                ]
            }
        ],
        checkable: true,
    },
    on: {
        check: (checkedKeys, event) => {
            console.log('勾选节点改变:', checkedKeys, event);
        },
        select: (selectedKeys, event) => {
            console.log('选中节点改变:', selectedKeys, event);
        },
        expand: (expandKeys, event) => {
            console.log('展开节点改变:', expandKeys, event);
        },
    },
}

勾选后统计权限数量

const rule = [
    {
        type:"tree",
        title:"权限选择",
        field:"permissions",
        value:[],
        props:{
            data: [
                {
                    key: 1,
                    title: '用户管理',
                    children: [
                        { key: 11, title: '查看用户' },
                        { key: 12, title: '编辑用户' },
                    ]
                }
            ],
            checkable: true,
        },
        inject: true,
        on: {
            check: ($inject, checkedKeys) => {
                // 统计已选权限数量
                $inject.api.setValue('permissionCount', checkedKeys.length);
            },
        },
    },
    {
        type:"input",
        field:"permissionCount",
        title:"已选权限数",
        props: {
            disabled: true,
        },
    },
]

完整配置项:arco-design_Tree

value :Array

Props

参数名	描述	类型	默认值	版本
size	尺寸	'mini' | 'small' | 'medium' | 'large'	'medium'
block-node	节点是否占据一行	boolean	false
default-expand-all	是否默认展开父节点	boolean	true
multiple	是否支持多选	boolean	false
checkable	是否在节点前添加复选框	boolean	false
selectable	是否支持选择	boolean	true
check-strictly	是否取消父子节点关联	boolean	false
checked-strategy	定制回填方式 all: 返回所有选中的节点 parent: 父子节点都选中时只返回父节点 child: 只返回子节点 | 'all' | 'parent' | 'child'	'all'
default-selected-keys	默认选中的树节点	Array<string | number>	-
selected-keys	选中的树节点	Array<string | number>	-
default-checked-keys	默认选中复选框的树节点	Array<string | number>	-
checked-keys	选中复选框的树节点	Array<string | number>	-
default-expanded-keys	默认展开的节点	Array<string | number>	-
expanded-keys	展开的节点	Array<string | number>	-
data	传入data,生成对应的树结构	TreeNodeData[]	[]
field-names	指定节点数据中的字段名	FieldNames	-
show-line	是否展示连接线	boolean	false
load-more	异步加载数据的回调，返回一个 Promise	(node: TreeNodeData) => Promise<void>	-
draggable	是否可以拖拽	boolean	false
allow-drop	拖拽时是否允许在某节点上释放	(options: { dropNode: TreeNodeData; dropPosition: -1 | 0 | 1;}) => boolean	-
virtual-list-props	传递虚拟列表属性，传入此参数以开启虚拟滚动，VirtualListProps	VirtualListProps	-
default-expand-selected	是否默认展开已选中节点的父节点	boolean	false	2.9.0
default-expand-checked	是否默认展开已选中复选框节点的父节点	boolean	false	2.9.0
auto-expand-parent	是否自动展开已展开节点的父节点	boolean	true	2.9.0

Events

事件名	描述	参数
select	点击树节点时触发	selectedKeys: Array<string | number> event: { selected: boolean; selectedNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
check	点击树节点复选框时触发	checkedKeys: Array<string | number> event: { checked: boolean; checkedNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
expand	展开/关闭	expandKeys: Array<string | number> event: { expanded: boolean; expandNodes: TreeNodeData[]; node: TreeNodeData; e: Event; }
drag-start	节点开始拖拽	-
drag-end	节点结束拖拽	event: DragEvent node: TreeNodeData
drag-over	节点被拖拽至可释放目标	event: DragEvent node: TreeNodeData
drag-leave	节点离开可释放目标	event: DragEvent node: TreeNodeData
drop	节点在可释放目标上释放	info: { e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: -1 ｜ 0 ｜ 1; }