Tree 树形组件

规则

const rule = {
    type:"tree",
    title:"权限",
    field:"rule",
    value:[],
    props:{
        data:[],
        props: {
            label: "title"
        }
    }
}

完整配置项: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; }`

Tree 树形组件 ​

规则 ​

Props ​

Events ​

Tree 树形组件

规则

Props

Events