infogo-tree

在线 demo

安装

$3

``bash yarn add infogo-tree`

`$3`

`bash npm install infogo-tree`

`$3`

直接引入 css

`less @import 'infogo-tree/dist/ctree.css';`

引入 less 以便于变量覆盖

`less @import 'infogo-tree/src/styles/index.less';`

`CTree API`

`$3`

| 属性 | 说明 | 类型 | 默认值 | | :---------------------- | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | :-------------------- | | value | 选中的值，可用 v-model ；单选为字符串或数字，多选为separator 分隔的字符串或数组，优先多选 | string \| number \| Array| 无 | | data | 传入的树数据。数据量大时，不建议通过 props 传入数据，建议用setData 方法代替 | object[]| [] | | unloadDataList | 供未加载且选中节点查询 title 字段值用的列表，格式与data 一致即可 | object[]| [] | | showUnloadCheckedNodes | 过滤已选时是否在列表后面展示未加载的已选节点 |boolean| true | | emptyText | 数据为空时显示的文本 |string| '暂无数据' | | titleField | 节点标题字段 |string| 'title' | | keyField | 节点唯一标识字段 |string| 'id' | | childStr | 子数据标识字段 |string| 'children' | | disabledFn | 禁用拓展方法 |string| (node): boolean => {} | | separator | 多选模式下 value 分隔符 |string| ',' | | replenishSelect | 是否需要补全未渲染节点(初始化时，常用于补全子节点) |boolean| false | | checkable | 是否可多选 |boolean| false | | selectable | 是否可单选 |boolean| false | | filteredNodeCheckable | 是否可勾选被过滤节点 |boolean| false | | cascade | 父子节点是否关联 |boolean| true | | enableLeafOnly | 是否只启用子节点，当多选且父子不关联 或 单选 时有效 | boolean| false | | cascadeLoose | 不严格的父子关联，父选中，子全选，子全选，父不选中，当多选且父子关联时有效 | boolean| false | | disableAll | 是否禁用所有节点 |boolean| false | | defaultExpandAll | 是否默认展开所有节点 |boolean| false | | [] | | expandedKeys | 展开的节点 key ，组件内部将会响应此 Prop 的变化 |Array| [] | | draggable | 是否可拖拽 |boolean| false | | droppable | 是否可放置 |boolean| false | | beforeDropMethod | 在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置 |(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean | () => true| | ignoreMode | 忽略模式，指定getCheckedNodes, getCheckedKeys 与 v-model 默认要忽略的部分 | 'none' \| 'parents' \| 'children'| 'none' | | autoLoad | 异步加载初始化时是否自动加载根节点 |boolean| true | | load | 异步加载方法 |(node: null \| TreeNode, resolve: Function, reject: Function) => any| 无 | | render | 节点渲染 render 函数 |(h: CreateElement, node: TreeNode) => VNode| 无 | | filterMethod | 节点过滤方法 |(keyword: string, node: TreeNode) => boolean| 无 | | expandOnFilter2.1.0 | 过滤时是否展开所有可见节点 | boolean| true | | unselectOnClick2.1.0 | 点击已选中节点是否取消选中 | boolean| true | | loading | 是否显示 loading 图标 |boolean| false | | nodeClassName | 节点根元素的 class ，传入函数以对每个节点定制 class |string \| object \| Array \| (node: TreeNode) => string \| object \| Array| 无 | | nodeMinHeight | 根据节点最小高度计算数据总高度 |number| 30 | | nodeIndent | 子节点缩进 |number| 20 | | renderNodeAmount | 渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 |number| 100 | | bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 |number | 20 |

`$3`

注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。

`$3`

`$3`

| 名称 | 说明 | | :------ | :--------------- | | empty | 暂无数据 | | loading | 加载中显示的图标 |

`$3`

注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑

`CTreeSearch API`

`$3`

注：可在 CTreeSearch 上直接使用 CTree 的所有 Props

| 属性 | 说明 | 类型 | 默认值 | | :------------------- | :--------------------------------------------------------------------------------- | :------------------------------------------- | :------------------------------------------------ | | searchPlaceholder | 搜索输入框的 placeholder |string| '搜索关键字' | | diyText | 自定义文字 |object| {selectAll: '全选', selected: '已选', num: '个',} | | showCheckAll | 是否显示全选复选框 |boolean| true | | isTree | 数据是否是树形 |boolean| true | | showCheckedButton | 是否显示已选按钮 |boolean| true | | checkedButtonText | 已选按钮文字 |string| '已选' | | showFooter | 是否显示底部信息 |boolean| true | | searchMethod2.0.2 | 如果传入此 Prop ，触发 search 事件后将会执行此方法，否则会执行组件内置的搜索方法 | (keyword: string) => void \| Promise| 无 | | searchLength | 触发搜索的字符长度 |number| 1 | | searchDisabled | 禁用搜索功能 |boolean| false | | searchRemote | 是否远程搜索，传入searchMethod 时无效 | boolean| false | | searchDebounceTime | 搜索防抖时间，单位为毫秒 |number | 300 |

`$3`

注：可在 CTreeSearch 上直接监听 CTree 的所有 Events

| 事件名 | 说明 | 返回值 | | :----- | :----------------- | :----------- | | search | 执行搜索操作时触发 | 搜索的关键字 |

`$3`

注：可在 CTreeSearch 上直接调用 CTree 的所有 Methods

| 方法 | 说明 | 参数 | 返回值 | | :----------- | :------------- | :------------------------------------------------------- | :-------------- | | clearKeyword | 清空关键字 | 无 |void| | getKeyword | 获取搜索关键字 | 无 |string| | search | 执行搜索 |keyword: string: 搜索的关键字，默认为内部 this.keyword | Promise |

`$3`

注：可在 CTreeSearch 上直接传入 CTree 的所有 Slots

| 名称 | 说明 | | :----------- | :------------------------------------------------- | | search-input | 搜索输入框，可通过此 slot 自行封装树搜索组件的行为 | | actions | 操作按钮，可在搜索输入框后加入更多操作按钮 | | footer | 底部信息 |

`CTreeDrop API`

`$3`

注：可在 CTreeDrop 上直接使用 CTree 和 CTreeSearch 的所有 Props

`$3`

注：可在 CTreeDrop 上直接监听 CTree 和 CTreeSearch 的所有 Events

| 事件名 | 说明 | 返回值 | | :---------------------- | :--------------------- | :------------- | | dropdown-visible-change | 下拉框出现或消失时触发 | 下拉框是否可见 | | clear | 点击清空按钮时触发 | 无 |

`$3`

注：可在 CTreeDrop 上直接调用 CTree 和 CTreeSearch 的所有 Methods

`$3`

注：可在 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 。

infogo-tree

在线 demo

安装

$3

``bash yarn add infogo-tree`

`$3`

`bash npm install infogo-tree`

`$3`

直接引入 css

`less @import 'infogo-tree/dist/ctree.css';`

引入 less 以便于变量覆盖

`less @import 'infogo-tree/src/styles/index.less';`

`CTree API`

`$3`

注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。

`$3`

| 名称 | 说明 | | :------ | :--------------- | | empty | 暂无数据 | | loading | 加载中显示的图标 |

`$3`

注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑

`CTreeSearch API`

`$3`

注：可在 CTreeSearch 上直接使用 CTree 的所有 Props

`$3`

注：可在 CTreeSearch 上直接监听 CTree 的所有 Events

| 事件名 | 说明 | 返回值 | | :----- | :----------------- | :----------- | | search | 执行搜索操作时触发 | 搜索的关键字 |

`$3`

注：可在 CTreeSearch 上直接调用 CTree 的所有 Methods

`$3`

注：可在 CTreeSearch 上直接传入 CTree 的所有 Slots

`CTreeDrop API`

`$3`

注：可在 CTreeDrop 上直接使用 CTree 和 CTreeSearch 的所有 Props

`$3`

注：可在 CTreeDrop 上直接监听 CTree 和 CTreeSearch 的所有 Events

`$3`

注：可在 CTreeDrop 上直接调用 CTree 和 CTreeSearch 的所有 Methods

`$3`

注：可在 CTreeDrop 上直接传入 CTree 和 CTreeSearch 的所有 Slots

默认 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, },`