Vue3UI

Appearance

Tree 树形控件 ​

基本用法 ​

自定义属性 ​

不同的点击区域 ​

通过将 expandOnClickNode设为 false，限制为只能点击树节点的缩略图标来切换是否展开

所有节点默认展开 ​

撑满宽度 ​

节点懒加载 ​

节点可选择 ​

手风琴模式 ​

禁用树节点 ​

可以禁用树节点的复选框

树节点拖拽 ​

可以通过 allowDragMethod方法判断单个树节点是否可以拖拽，可以通过 allowDropMethod方法判断单个树节点是否可以放置

API ​

Tree Props ​

参数名说明类型可选值默认值是否必填
data树形数据源ITreeData[][]
nodeKey唯一标识每个树节点ITreeNodeKey
props每个节点对应的 data中的键ITreeProp
lazy节点是否懒加载booleanfalse
lazyMethod节点懒加载数据的方法(options: { node:ITreeNode, data:ITreeData, resolve: (children:ITreeData) =>void }) =>void
selectable节点是否可选择booleanfalse
highlightFocusedNode聚焦的节点是否高亮显示booleantrue
selectIsolate在节点可选择的情况下，父子节点是否独立选择booleanfalse
expandOnClickNode是否在点击节点任意区域后展开该节点booleantrue
selectOnClickNode是否在点击节点任意区域后选中该节点booleanfalse
accordion手风琴模式，即同级节点只显示一个booleanfalse
indent缩进的大小（单位为 px）number12
draggable节点是否可拖动booleanfalse
defaultExpandAll所有节点是否默认展开booleanfalse
block节点宽度是否撑开booleanfalse
allowDragMethod对于每个节点，判断是否可拖动(options: { node:ITreeNode, data:ITreeData }) =>boolean
allowDropMethod对于某个节点，判断是否可放置(options: { node:ITreeNode, data:ITreeData }) =>boolean

Tree Types ​

typescript
export type ITreeData = any;
export interface ITreeNode {
	key: ITreeBaseKey;
	label: string;
	selected: boolean;
	indeterminate: boolean;
	loaded: boolean;
	loading: boolean;
	expanded: boolean;
	disabled: boolean;
	data: ITreeData;
	root: boolean;
	children?: ITreeNode[];
	parent?: ITreeNode;
}
export type ITreeBaseKey = string | number | symbol;
export type ITreeNodeKey = ITreeBaseKey &
	((options: { data: ITreeData }) => ITreeBaseKey);
export interface ITreeProp {
	key?: string;
	label?: string;
	children?: string;
	disabled?: string;
}

Tree Exposes ​

属性名说明类型
getSelectionNodes获取选中的所有节点Function
toggleNodeSelection切换某个节点的选中状态Function