mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-06 16:30:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [tree-v2] filter-method support third parameter (#19177)

Browse Source
This commit is contained in:
btea 2024-12-09 16:19:11 +08:00 committed by GitHub
parent 0f8d246023
commit d99d0b14a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/en-US/component/tree-v2.md
View File

@ -69,6 +69,9 @@ tree-v2/custom-node-class
## Tree node filtering
::: ^(2.9.1)
The `filter-method` method can only accept the third parameter after version 2.9.1.
:::
Tree nodes can be filtered
:::demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-method` is required, and its value is the filtering method.
@ -79,23 +82,23 @@ tree-v2/filter
## TreeV2 Attributes
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |
| data | tree data | array | — |
| empty-text | text displayed when data is void | string | — |
| props | configuration options, see the following table | object | — |
| highlight-current | whether current node is highlighted | boolean | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | true |
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | false |
| default-expanded-keys | array of keys of initially expanded nodes | array | — |
| show-checkbox | whether node is selectable | boolean | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | false |
| default-checked-keys | array of keys of initially checked nodes | array | — |
| current-node-key | key of initially selected node | string / number | — |
| filter-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data) | — |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | 16 |
| icon | custom tree node icon | `string \| Component` | — |
| item-size ^(2.2.33) | custom tree node height | number | 26 |
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------- |
| data | tree data | array | — |
| empty-text | text displayed when data is void | string | — |
| props | configuration options, see the following table | object | — |
| highlight-current | whether current node is highlighted | boolean | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | true |
| check-on-click-node | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | false |
| default-expanded-keys | array of keys of initially expanded nodes | array | — |
| show-checkbox | whether node is selectable | boolean | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | false |
| default-checked-keys | array of keys of initially checked nodes | array | — |
| current-node-key | key of initially selected node | string / number | — |
| filter-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | 16 |
| icon | custom tree node icon | `string \| Component` | — |
| item-size ^(2.2.33) | custom tree node height | number | 26 |
## props

2
packages/components/tree-v2/src/composables/useFilter.ts
View File

@ -28,7 +28,7 @@ export function useFilter(props: TreeProps, tree: Ref<Tree | undefined>) {
function traverse(nodes: TreeNode[]) {
nodes.forEach((node) => {
family.push(node)
if (filter?.(query, node.data)) {
if (filter?.(query, node.data, node)) {
family.forEach((member) => {
expandKeySet.add(member.key)
})

6
packages/components/tree-v2/src/types.ts
View File

@ -48,7 +48,11 @@ export interface Tree {
maxLevel: number
}
export type FilterMethod = (query: string, node: TreeNodeData) => boolean
export type FilterMethod = (
query: string,
data: TreeNodeData,
node: TreeNode
) => boolean
export interface CheckedInfo {
checkedKeys: TreeKey[]