4dkankan-components/docs/examples/tree-v2/filter.vue

<template>
    <el-input v-model="query" placeholder="Please enter keyword" @input="onQueryChanged" />
    <el-tree-v2 ref="treeRef" :data="data" :props="props" :filter-method="filterMethod" :height="208" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { ElTreeV2 } from 'element-plus'
import type { TreeNode } from 'element-plus/es/components/tree-v2/src/types'

interface Tree {
    id: string
    label: string
    children?: Tree[]
}

const getKey = (prefix: string, id: number) => {
    return `${prefix}-${id}`
}

const createData = (maxDeep: number, maxChildren: number, minNodesNumber: number, deep = 1, key = 'node'): Tree[] => {
    let id = 0
    return Array.from({ length: minNodesNumber })
        .fill(deep)
        .map(() => {
            const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren)
            const nodeKey = getKey(key, ++id)
            return {
                id: nodeKey,
                label: nodeKey,
                children: childrenNumber ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey) : undefined,
            }
        })
}

const query = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()
const data = createData(4, 30, 5)
const props = {
    value: 'id',
    label: 'label',
    children: 'children',
}

const onQueryChanged = (query: string) => {
    // TODO: fix typing when refactor tree-v2
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    treeRef.value!.filter(query)
}
const filterMethod = (query: string, node: TreeNode) => {
    return node.label!.includes(query)
}
</script>