A vue tree component using virtual list.
``bash`
yarn add @wsfe/ctree
`bash`
npm install @wsfe/ctree
直接引入 css
`less`
@import '~@wsfe/ctree/dist/ctree.css';
引入 less 以便于变量覆盖
`less`
@import '~@wsfe/ctree/src/styles/index.less';
| 属性 | 说明 | 类型 | 默认值 |
| :------------------------------- | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |
| value | 选中的值，可用 v-model ；单选为字符串或数字，多选为 separator 分隔的字符串或数组，优先多选 | string \| number \| Array | 无 |setData
| data | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 方法代替 | object[] | [] |data
| unloadDataList | 供未加载且选中节点查询 title 字段值用的列表，格式与 一致即可 | object[] | [] |boolean
| showUnloadCheckedNodes | 过滤已选时是否在列表后面展示未加载的已选节点 | | true |string
| emptyText | 数据为空时显示的文本 | | '暂无数据' |string
| titleField | 节点标题字段 | | 'title' |string
| keyField | 节点唯一标识字段 | | 'id' |string
| separator | 多选模式下 value 分隔符 | | ',' |boolean
| checkable | 是否可多选 | | false |boolean
| selectable | 是否可单选 | | false |boolean
| filteredNodeCheckable | 是否可勾选被过滤节点 | | false |boolean
| cascade | 父子节点是否关联 | | true |多选且父子不关联
| enableLeafOnly | 是否只启用子节点，当 或 单选 时有效 | boolean | false |boolean
| disableAll | 是否禁用所有节点 | | false |boolean
| defaultExpandAll | 是否默认展开所有节点 | | false |Deprecated
| defaultExpandedKeys | 默认展开的节点 key | Array | [] |2.2.0
| expandedKeys | 展开的节点 key ，组件内部将会响应此 Prop 的变化 | Array | [] |boolean
| draggable | 是否可拖拽 | | false |boolean
| droppable | 是否可放置 | | false |(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean
| beforeDropMethod | 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置 | | () => true |getCheckedNodes
| ignoreMode | 忽略模式，指定 , getCheckedKeys 与 v-model 默认要忽略的部分 | 'none' \| 'parents' \| 'children' | 'none' |boolean
| autoLoad | 异步加载初始化时是否自动加载根节点 | | true |(node: null \| TreeNode, resolve: Function, reject: Function) => any
| load | 异步加载方法 | | 无 |(h: CreateElement, node: TreeNode) => VNode
| render | 节点渲染 render 函数 | | 无 |(keyword: string, node: TreeNode) => boolean
| filterMethod | 节点过滤方法 | | 无 |2.1.0
| expandOnFilter | 过滤时是否展开所有可见节点 | boolean | true |2.1.0
| unselectOnClick | 点击已选中节点是否取消选中 | boolean | true |boolean
| loading | 是否显示 loading 图标 | | false |string \| object \| Array
| nodeClassName | 节点根元素的 class ，传入函数以对每个节点定制 class | | 无 |2.4.0
| showLine | 是否显示连接线，可指定连接线的宽度、颜色、实线、虚线，以及是否有折线 | boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean } | 无，如果传入的非 boolean，则默认为 { width: 1, type: 'solid', color: '#D3D3D3', polyline: false } |2.4.0
| animation | 是否启用过渡动画，目前仅控制展开收起 | boolean | 无 |number
| nodeMinHeight | 根据节点最小高度计算数据总高度 | | 30 |number
| nodeIndent | 子节点缩进 | | 20 |number
| renderNodeAmount | 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | | 100 |number
| bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 | | 20 |
注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。
| 事件名 | 说明 | 返回值 |
| :--------------- | :-------------------------- | :-------------------------------------------------------------------------- |
| input | 选中节点改变时触发 | 选中的节点 |
| expand | 展开/折叠时触发 | 节点信息 |
| check | 勾选时触发（多选） | 被勾选的节点信息 |
| uncheck | 取消勾选时触发（多选） | 被取消勾选的节点信息 |
| checked-change | 勾选/取消勾选时触发（多选） | 所有被勾选节点（数组） |
| select | 选中时触发（单选） | 被选中的节点信息 |
| unselect | 取消选中时触发（单选） | 被取消选中的节点信息 |
| selected-change | 选中/取消选中时触发（单选） | 被选中节点 |
| click | 点击节点时触发 | 节点信息 |
| node-dblclick | 双击节点时触发 | 节点信息 |
| node-right-click | 右击节点时触发 | 节点信息 |
| node-dragstart | 开始拖拽节点时触发 | 节点信息, 拖拽事件对象 |
| node-dragenter | dragenter 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 'before' \| 'body' \| 'after' |'before' \| 'body' \| 'after'
| node-dragover | dragover 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 |'before' \| 'body' \| 'after'
| node-dragleave | dragleave 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 |'before' \| 'body' \| 'after'
| node-drop | 放置节点时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 |
| 方法 | 说明 | 参数 | 返回值 |
| :--------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------- |
| setData | 使用此方法重置树数据，可避免大量数据被 vue 监听 | data: object[]: 同 data Prop | void |key: string \| number
| setChecked | 设置多选选中/取消选中 | : 节点 keyvalue: boolean: 是否选中 | void |keys: Array
| setCheckedKeys | 批量设置选中/取消选中 | : 节点 keyvalue: boolean: 是否选中 | void |void
| checkAll | 设置所有数据全选 | 无 | |void
| clearChecked | 清空选中 | 无 | |key: string \| number
| setSelected | 设置单选选中/取消选中 | : 节点 keyvalue: boolean: 是否选中 | void |key: string \| number
| setExpand | 设置展开/折叠 | : 节点 keyvalue: boolean: 是否展开expandParent: boolean = true: 如果是展开是否同时展开父节点 2.0.6 | void |keys: Array
| setExpandKeys | 批量展开/折叠 | : 节点 keyvalue: boolean: 是否展开 | void |value: boolean
| setExpandAll | 设置全部展开/折叠 | : 是否展开 | void |ignoreMode: 'none' \| 'parents' \| 'children'
| getCheckedNodes | 获取多选选中节点 | : 需要忽略的部分，默认为 ignoreMode Prop | TreeNode[] |ignoreMode: 'none' \| 'parents' \| 'children'
| getCheckedKeys | 获取多选选中节点 key | : 需要忽略的部分，默认为 ignoreMode Prop | Array |TreeNode[]
| getIndeterminateNodes | 获取半选状态的节点 | 无 | |TreeNode \| null
| getSelectedNode | 获取单选选中节点 | 无 | |TreeNode \| null
| getSelectedKey | 获取单选选中节点 key | 无 | |TreeNode[]
| getExpandNodes | 获取展开的节点 | 无 | |TreeNode[]
| getExpandKeys | 获取展开的节点 key | 无 | |TreeNode[]
| getCurrentVisibleNodes | 获取当前可见的节点 | 无 | |key: string \| number
| getNode | 根据 key 获取节点 | : 节点 key | TreeNode \| null |TreeNode[]
| getTreeData | 获取树形结构的节点数据 | 无 | |TreeNode[]
| getFlatData | 获取扁平化后的节点数据 | 无 | |number
| getNodesCount | 获取节点总数量 | 无 | |insertedNode
| insertBefore | 在参照节点前插入一个节点 | : 节点 key 或者单个节点数据referenceKey: string \| number: 参照节点 key | TreeNode \| null 返回插入的节点 |insertedNode
| insertAfter | 在参照节点后插入一个节点 | : 节点 key 或者单个节点数据referenceKey: string \| number: 参照节点 key | TreeNode \| null 返回插入的节点 |insertedNode
| append | 在父节点第一层子节点的末尾插入一个节点 | : 节点 key 或者单个节点数据parentKey: string \| number: 父节点 key | TreeNode \| null 返回插入的节点 |insertedNode
| prepend | 在父节点第一层子节点的开头插入一个节点 | : 节点 key 或者单个节点数据parentKey: string \| number: 父节点 key | TreeNode \| null 返回插入的节点 |removedKey: string \| number
| remove | 删除节点 | : 要删除的节点 key | TreeNode \| null 返回删除的节点 |keyword: string
| filter | 过滤节点 | : 过滤关键词filterMethod: (keyword: string, node: TreeNode) => boolean: 过滤方法，默认为 filterMethod Prop ，如果没有传 filterMethod Prop 则为搜索 title 字段的一个内置方法 | void |showUnloadCheckedNodes: boolean
| showCheckedNodes | 展示已选节点 | : 是否显示未加载的选中节点，默认为 Prop 传入的值 | void |Promise
| loadRootNodes | 从远程加载根节点 | 无 | |key: string \| number
| scrollTo | 滚动到指定节点位置 | : 节点 keyverticalPosition: 'top' \| 'center' \| 'bottom' \| number: 滚动的垂直位置 | void |
| 名称 | 说明 |
| :----------- | :-------------------------------------------- |
| empty | 暂无数据 |
| loading | 加载中显示的图标 |
| node 2.4.0 | 自定义节点，slotProps 为 { node: TreeNode } |
注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑
| 字段 | 说明 |
| :------------- | :------------------------------------------------------------------------------ |
| id | 默认以 'id' 作为 key 字段，也可以通过 keyField Prop 指定其他字段作为 key 字段 |titleField
| title | 默认显示的名称，可通过 Prop 指定其他字段作为 title 字段 |
| checked | 多选模式下是否勾选 |
| selected | 单选模式下是否选中 |
| indeterminate | 多选模式下是否半选状态 |
| disabled | 是否禁用 |
| expand | 父节点有效，节点展开状态 |
| visible | 是否可见 |
| _filterVisible | 过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的 |
| _parent | 父节点 |
| children | 子节点数组 |
| isLeaf | 标记节点是否为叶子节点 |
| _level | 节点层级，默认从 0 开始 |
| _loading | 节点是否正在加载 |
| _loaded | 节点是否已经加载过，异步加载下有效 |
注：可在 CTreeSearch 上直接使用 CTree 的所有 Props
| 属性 | 说明 | 类型 | 默认值 |
| :------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------- | :----------- |
| searchPlaceholder | 搜索输入框的 placeholder | string | '搜索关键字' |boolean
| showCheckAll | 是否显示全选复选框 | | true |boolean
| showCheckedButton | 是否显示已选按钮 | | true |string
| checkedButtonText | 已选按钮文字 | | '已选' |boolean
| showFooter | 是否显示底部信息 | | true |2.0.2
| searchMethod | 如果传入此 Prop ，触发 search 事件后将会执行此方法，否则会执行组件内置的搜索方法 | (keyword: string) => void \| Promise | 无 |number
| searchLength | 触发搜索的字符长度 | | 1 |boolean
| searchDisabled | 禁用搜索功能 | | false |searchMethod
| searchRemote | 是否远程搜索，传入 时无效 | boolean | false |number
| searchDebounceTime | 搜索防抖时间，单位为毫秒 | | 300 |
注：可在 CTreeSearch 上直接监听 CTree 的所有 Events
| 事件名 | 说明 | 返回值 |
| :----- | :----------------- | :----------- |
| search | 执行搜索操作时触发 | 搜索的关键字 |
注：可在 CTreeSearch 上直接调用 CTree 的所有 Methods
| 方法 | 说明 | 参数 | 返回值 |
| :----------- | :------------- | :------------------------------------------------------- | :-------------- |
| clearKeyword | 清空关键字 | 无 | void |string
| getKeyword | 获取搜索关键字 | 无 | |keyword: string
| search | 执行搜索 | : 搜索的关键字，默认为内部 this.keyword | Promise |
注：可在 CTreeSearch 上直接传入 CTree 的所有 Slots
| 名称 | 说明 |
| :----------- | :------------------------------------------------- |
| search-input | 搜索输入框，可通过此 slot 自行封装树搜索组件的行为 |
| actions | 操作按钮，可在搜索输入框后加入更多操作按钮 |
| footer | 底部信息 |
注：可在 CTreeDrop 上直接使用 CTree 和 CTreeSearch 的所有 Props
| 属性 | 说明 | 类型 | 默认值 |
| :------------------------- | :------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :------------- |
| dropHeight | 下拉内容高度 | number | 300 |string
| dropPlaceholder | 展示输入框 placeholder | | 无 |boolean
| dropDisabled | 是否禁用 | | false |boolean
| clearable | 允许清空 | | false |'bottom-start' \| 'bottom-end' \| 'bottom' \| 'top-start' \| 'top-end' \| 'top'
| placement | 下拉弹出框位置，注意！！不支持自动识别方向 | | 'bottom-start' |boolean
| transfer | 将下拉 DOM 转移到 body 中 | | false |string \| string[]
| dropdownClassName | 在下拉框容器上额外添加的 class | | 无 |2.0.1
| dropdownMinWidth | 下拉框容器最小宽度，未指定则默认为展示输入框宽度。 适合 transfer 为 false 时使用 | number | 无 |2.0.5
| dropdownWidthFixed | 固定下拉框容器宽度，当内容超出最小宽度不会伸长，而是出现横向滚动条 | boolean | false |
注：可在 CTreeDrop 上直接监听 CTree 和 CTreeSearch 的所有 Events
| 事件名 | 说明 | 返回值 |
| :---------------------- | :--------------------- | :------------- |
| dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 |
| clear | 点击清空按钮时触发 | 无 |
注：可在 CTreeDrop 上直接调用 CTree 和 CTreeSearch 的所有 Methods
注：可在 CTreeDrop 上直接传入 CTree 和 CTreeSearch 的所有 Slots
| 名称 | 说明 |
| :------ | :--------------------------------------------------- |
| 默认 | 展示输入框 |
| display | 展示输入框的展示文字，如果有默认 slot 则此 slot 无效 |
| clear | 替换清空图标，如果有默认 slot 则此 slot 无效 |
默认 slot 与 display slot 的 Slot Props 2.3.0 ：
`typescript
/* 展示 slot 的 props /
slotProps: {
/* 多选选中的节点 /
checkedNodes: [] as TreeNode[],
/* 多选选中的节点 key /
checkedKeys: [] as Array
/* 单选选中的节点 /
selectedNode: null as TreeNode | null,
/* 单选选中的节点 key /
selectedKey: null as string | number | null,
},
`
注意： checkedNodes 与 selectedNode 只包含已加载的节点，如果设置了选中的值（比如设置了 value Prop），但没有设置树的数据，则这两个字段内容将为空；而 checkedKeys 与 selectedKey` 则会包含未加载的选中节点 key 。