Element Plus

<script setup lang="ts">
import type { ElTree } from 'element-plus'
import { ref, watch } from 'vue'

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

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

function filterNode(value: string, data: Tree) {
  if (!value)
    return true
  return check(data, value)
}

function check(node: Tree, value: string): boolean {
  if (node.label.includes(value))
    return true

  if (node.children)
    return node.children.some(child => check(child, value))

  return false
}

const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <el-input v-model="filterText" placeholder="Filter keyword" />
  <el-tree
    ref="treeRef"
    class="filter-tree"
    :data="data"
    :props="{ children: 'children', label: 'label' }"
    default-expand-all
    :filter-node-method="filterNode"
  />
</template>