Tree 树形组件
规则
js
{
type:"tree",
title:"权限",
field:"rule",
value:[],
props:{
data:[],
props: {
label: "title"
}
}
}
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; } |