Element Plus

遇到的问题和解决方案

• Element Plus 组件库

Tree 树节点过滤时保留父节点和子节点

点我查看代码

<script setup lang="ts">
function nodeMatches(node: Node, searchValue: string): boolean {
  return !!(node.data && node.data.name && node.data.name.includes(searchValue))
}

function filterNode(value: string, _data: any, node: Node): boolean {
  // 如果没有过滤值，显示所有节点
  if (!value) {
    return true
  }
  // 从当前节点开始，向上遍历至根节点
  let currentNode: Node | undefined = node
  while (currentNode) {
    // 如果当前节点匹配，则返回 true 以显示该节点
    if (nodeMatches(currentNode, value)) {
      return true
    }
    // 如果已经到达顶层节点，结束循环
    if (currentNode.level === 1)
      break
    // 向上遍历父节点
    currentNode = currentNode.parent
  }
  // 如果没有匹配的节点，则不显示
  return false
}
</script>

<template>
  <ElTree :filter-node-method="filterNode" />
</template>