Skip to content

Tree 树形组件

规则

js
{
    type:"tree",
    title:"权限",
    field:"rule",
    value:[],
    props:{
        data:[],
        props: {
            label: "title"
        }
    }
}
{
    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节点是否占据一行booleanfalse
default-expand-all是否默认展开父节点booleantrue
multiple是否支持多选booleanfalse
checkable是否在节点前添加复选框booleanfalse
selectable是否支持选择booleantrue
check-strictly是否取消父子节点关联booleanfalse
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是否展示连接线booleanfalse
load-more异步加载数据的回调,返回一个 Promise(node: TreeNodeData) => Promise<void>-
draggable是否可以拖拽booleanfalse
allow-drop拖拽时是否允许在某节点上释放(options: { dropNode: TreeNodeData; dropPosition: -1 | 0 | 1;}) => boolean-
virtual-list-props传递虚拟列表属性,传入此参数以开启虚拟滚动,VirtualListPropsVirtualListProps-
default-expand-selected是否默认展开已选中节点的父节点booleanfalse2.9.0
default-expand-checked是否默认展开已选中复选框节点的父节点booleanfalse2.9.0
auto-expand-parent是否自动展开已展开节点的父节点booleantrue2.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; }

Released under the MIT License.