<think>我们正在使用Element UI的
Tree组件，并希望实现一个搜索功能，该功能在输入关键词
时能够
显示匹配的子
节点，并且同
时显示其父
节点（以确保树结构的可见性）。根据提供的引用，特别是引用[2]和引用[3]，我们可以使用`filter-node-method`属性来自定义过滤方法。
关键点：
1. 在
Tree组件上使用`:filter-node-method="filterNode
Tree"`，这是一个自定义的过滤函数。
2. 在输入框上使用`@input="filterInput"`来触发过滤操作。
3. 过滤函数`filterNode
Tree`会遍历每个
节点，我们需要在这个函数中实现匹配逻辑。
目标：当输入关键词
时，如果某个
节点匹配（可以是
节点的任何属性，比如`label`），则
显示该
节点，并且同
时显示其所有父
节点（以便展开路径）以及它的子
节点（如果子
节点匹配，则同样处理）。
然而，Element UI的
Tree组件默认的过滤行为是：如果
节点匹配，则
显示该
节点，但不会自动
显示其父
节点（即不会展开父
节点）。因此，我们需要在过滤函数中，对于匹配的
节点，将其所有父
节点也标记为匹配（通过返回true），这样父
节点就会
显示，并且会自动展开。
但是，注意：我们并不希望将所有父
节点都标记为匹配（因为这样可能会
显示太多不相关的
节点），而是只标记匹配
节点的路径上的父
节点。
实现思路：
在`filterNode
Tree`函数中，我们判断当前
节点是否匹配关键词，或者它的任意子
节点是否匹配（递归判断）。如果
节点本身匹配，或者它的后代中有一个匹配，那么我们就
显示这个
节点（即返回true）。这样，从根
节点到匹配
节点的路径上的所有
节点都会被
显示。
然而，Element UI的过滤函数只针对单个
节点进行判断，我们无法直接知道它的子
节点是否匹配。因此，我们需要预先遍历整个树，标记哪些
节点是匹配的或者有匹配的后代。但这样可能会影响性能，特别是树很大的
时候。
另一种方法（也是常见做法）：在过滤函数中，我们检查当前
节点是否匹配，如果匹配则返回true。然后，我们还需要检查当前
节点是否包含匹配的子
节点（通过递归检查子
节点），但这样递归检查在大型树上可能会有性能问题。
考虑到性能，我们可以使用另一种方式：在输入关键词
时，我们遍历整个树，给每个
节点设置一个属性（例如`visible`），然后根据这个属性来控制
显示。但是，Element UI的过滤方法是在每个
节点上独立调用的，所以我们可以利用一个全局的过滤关键词，然后在过滤函数中递归检查子
节点。
但是，在过滤函数中递归检查子
节点可能会导致性能下降，因为每个
节点都会触发对其子
节点的递归检查。因此，我们可以预先处理树结构，为每个
节点添加一个标志（例如`hasMatch`），表示该
节点本身或后代是否有匹配，然后在过滤函数中直接使用这个标志。不过，每次过滤关键词变化
时，我们需要重新计算这个标志。
步骤：
1. 在输入关键词
时（`filterInput`方法中），我们获取关键词，然后调用
Tree组件的`filter`方法（通过`this.$refs.cdList
Tree.filter(value)`）触发过滤。
2. 在过滤函数`filterNode
Tree`中，我们判断
节点本身是否匹配关键词，或者该
节点的后代中是否有匹配的
节点（递归判断）。我们可以写一个递归函数，但为了避免重复计算，我们可以在过滤函数外部先遍历树并标记哪些
节点需要
显示。
然而，由于Element UI的过滤函数是同步的，并且每次过滤都会重新遍历所有
节点，所以我们可以这样实现：
方法一（简单递归，适用于树不是特别大的情况）：
在`filterNode
Tree`函数中：
- 如果
节点本身匹配关键词（比如
节点的label包含关键词），返回true。
- 否则，检查该
节点的子
节点：如果该
节点有子
节点，递归检查子
节点中是否有任意一个
节点匹配（注意：这里递归可能会重复计算，因为每个
节点都会检查自己的子
节点，所以会有重复）。
方法二（优化）：我们可以在过滤函数外部，在每次关键词变化
时，先遍历整个树，为每个
节点设置一个标志（例如`isMatched`）表示
节点本身或后代是否匹配。然后在过滤函数中，我们只需要检查这个标志即可。
这里我们使用方法一，因为实现简单，但要注意树的大小。
具体实现：
1. 在`filterNode
Tree`函数中：
```javascript
filterNode
Tree(value, data) {
// 如果关键词为空，
显示所有
节点
if (!value) return true;
// 检查当前
节点是否匹配
if (data.name && data.name.indexOf(value) !== -1) {
return true;
}
// 检查子
节点中是否有匹配
const checkChildren = (children) => {
if (!children || children.length === 0) return false;
return children.some(child => {
// 如果子
节点本身匹配，或者子
节点的子
节点有匹配
return (child.name && child.name.indexOf(value) !== -1) || checkChildren(child.children);
});
};
return checkChildren(data.children);
}
```
但是，这样写会有一个问题：如果一个
节点本身不匹配，但是它的后代有匹配，那么它也会
显示。这正是我们想要的，因为这样就能展开路径。
但是，这种方法在树很大且嵌套很深
时可能会有性能问题，因为每个
节点都会递归检查子
节点。我们可以考虑优化递归，比如使用记忆化，但由于关键词是变化的，记忆化比较困难。
另一种思路：在输入关键词
时，我们遍历整棵树，标记每个
节点是否
显示（即
节点本身匹配或后代匹配），然后过滤函数直接返回这个标记。这样只需要遍历一次。
我们选择方法二：
步骤：
1. 在`filterInput`方法中，我们获取输入值，然后遍历整棵树，为每个
节点设置一个`visible`属性（或者我们使用一个Map来存储
节点id和是否可见）。注意：我们不能直接修改原始数据（因为原始数据可能是只读的），所以我们可以创建一个新的映射（
节点id -> 是否可见）或者使用一个外部对象来存储状态。
2. 然后，在过滤函数中，我们根据这个映射返回对应的布尔值。
但是，Element UI的
Tree组件要求过滤函数返回布尔值，并且不能直接传递额外的参数。因此，我们可以将关键词作为组件的一个数据属性，然后在过滤函数中利用这个关键词来检查
节点，同
时为了避免重复递归，我们使用一个缓存对象（以
节点id和关键词为键）来存储结果。
然而，由于关键词是不断变化的，缓存键需要包含关键词，这样缓存就会很大，而且每次关键词变化都要清空缓存。所以，我们选择在每次关键词变化
时，遍历整棵树一次，然后设置每个
节点的可见性，然后过滤函数直接返回
节点的可见性。
具体步骤：
1. 在data中定义一个对象`nodeVisibility`，用于存储
节点id和是否可见（布尔值）。
2. 在`filterInput`方法中：
- 获取输入的关键词
- 调用一个方法（例如`updateNodeVisibility`）来更新`nodeVisibility`对象
- 然后调用
Tree组件的filter方法（实际上，我们不需要调用filter方法，因为我们已经更新了`nodeVisibility`，但是
Tree组件不会自动更新，所以我们需要强制刷新。我们可以通过改变一个key来重新渲染
Tree，但更简单的是使用`this.$refs.cdList
Tree.filter(value)`，因为即使我们使用了`nodeVisibility`，我们仍然需要触发过滤函数执行）
3. 在`updateNodeVisibility`方法中，我们遍历整棵树，为每个
节点设置可见性（
节点本身匹配或后代匹配）。
4. 在过滤函数`filterNode
Tree`中，我们根据`nodeVisibility`中该
节点的id对应的值返回布尔值。
但是，注意：我们的树数据`cdList`是一个数组，我们需要递归遍历它。
实现`updateNodeVisibility`函数：
```javascript
updateNodeVisibility(keyword) {
// 清空之前的可见性状态
this.nodeVisibility = {};
if (!keyword) {
// 如果关键词为空，所有
节点都可见，但我们不设置nodeVisibility，在过滤函数中直接返回true，所以这里可以跳过
return;
}
// 递归遍历树，设置
节点可见性
const setVisibility = (nodes) => {
// 遍历当前层
节点
nodes.forEach(node => {
// 检查当前
节点是否匹配
const selfMatch = node.name && node.name.indexOf(keyword) !== -1;
// 递归检查子
节点，并得到子
节点中是否有匹配
let childrenMatch = false;
if (node.children && node.children.length) {
childrenMatch = setVisibility(node.children); // 注意：这个函数会设置子
节点的可见性，并返回子
节点中是否有任意匹配
}
// 当前
节点可见：自身匹配或子
节点有匹配
const visible = selfMatch || childrenMatch;
// 存储到nodeVisibility，使用
节点id作为键
this.$set(this.nodeVisibility, node.id, visible); // 使用Vue的set确保响应式
// 返回当前
节点或子
节点是否有匹配，用于父
节点判断
return visible;
});
// 返回当前层是否有任意
节点匹配
return nodes.some(node => this.nodeVisibility[node.id]);
};
// 从根
节点开始
setVisibility(this.cdList);
}
```
然后在过滤函数中：
```javascript
filterNode
Tree(value, data) {
if (!value) return true;
// 根据
节点id从nodeVisibility中获取可见性
return this.nodeVisibility[data.id] || false;
}
```
注意：这里我们假设每个
节点都有一个唯一的`id`。
但是，这种方法在树很大
时，每次输入变化都要遍历整棵树，可能会造成卡顿。我们可以使用防抖来减少更新频率。
另外，在输入框清空
时，我们也要处理：当关键词为空
时，我们希望所有
节点都
显示。所以，在过滤函数中，我们判断关键词为空
时返回true。
因此，我们可以简化：在`filterInput`方法中，我们调用`updateNodeVisibility`，然后触发过滤。在`filterNode
Tree`中，我们直接返回`nodeVisibility`中对应
节点的值（如果关键词为空，我们不会调用`updateNodeVisibility`，所以`nodeVisibility`可能是空的，那么我们在过滤函数中判断关键词为空
时返回true）。
修改过滤函数：
```javascript
filterNode
Tree(value, data) {
if (value === '') {
return true;
}
// 确保nodeVisibility中有这个
节点，如果没有，可能是还没更新，默认不
显示
return this.nodeVisibility[data.id] || false;
}
```
但是，在`filterInput`中，当关键词为空
时，我们也要更新`nodeVisibility`吗？我们可以不更新，因为空关键词
时我们直接返回true。所以，我们在`filterInput`中，如果关键词为空，我们可以直接调用`this.$refs.cdList
Tree.filter('')`，然后过滤函数就会返回true。同
时，我们也可以不清除`nodeVisibility`，因为当关键词为空
时，过滤函数根本不使用`nodeVisibility`。
因此，`filterInput`方法可以这样写：
```javascript
filterInput(value) {
if (value === '') {
// 清空过滤，
显示所有
节点
this.$refs.cdList
Tree.filter(value);
return;
}
// 更新
节点可见性
this.updateNodeVisibility(value);
// 触发过滤
this.$refs.cdList
Tree.filter(value);
}
```
注意：在`updateNodeVisibility`中，当关键词为空
时，我们直接返回，不设置任何`nodeVisibility`。
但是，当关键词从非空变为空
时，我们需要让所有
节点显示，所以过滤函数返回true，这样
Tree组件就会
显示所有
节点。
总结：
1. 在输入框输入
时，触发`filterInput`方法。
2. 如果输入为空，直接调用
Tree组件的filter方法，并传入空字符串，这样过滤函数就会返回true，所有
节点显示。
3. 如果输入不为空，调用`updateNodeVisibility`方法，该方法会遍历整棵树，为每个
节点设置可见性（存储在`nodeVisibility`中），然后调用
Tree组件的filter方法触发过滤。
4. 在过滤函数`filterNode
Tree`中，如果关键词为空，返回true；否则，从`nodeVisibility`中取出当前
节点的可见性返回。
这样，我们就实现了搜索
时显示匹配的子
节点，并且
显示其父
节点（路径上的
节点）。
另外，根据引用[2]和引用[3]，我们还需要在选中
节点时进行赋值操作（`currentHandle`方法），但这不是我们关注的重点。
代码结构示例：
```
html
<template>
<el-popover placement="bottom-start" trigger="click" style="width:100%;" v-model="cdListVisible">
<el-
tree
:data="cdList"
:props="{ label: 'name', children: 'children' }"
node-key="id"
ref="cdList
Tree"
:filter-node-method="filterNode
Tree"
@current-change="currentHandle"
></el-
tree>
<template>
<el-input
slot="reference"
v-model="dataForm.parentName"
@input="filterInput"
placeholder="设备树"
></el-input>
</template>
</el-popover>
</template>
<script>
export default {
data() {
return {
cdList: [], // 树数据
dataForm: {
parentName: ''
},
cdListVisible: false,
nodeVisibility: {} // 存储
节点id对应的可见性
};
},
methods: {
// 输入框输入事件
filterInput(value) {
if (value === '') {
this.$refs.cdList
Tree.filter(value);
return;
}
this.updateNodeVisibility(value);
this.$refs.cdList
Tree.filter(value);
},
// 更新
节点可见性
updateNodeVisibility(keyword) {
this.nodeVisibility = {}; // 清空
if (!keyword) return;
// 递归设置可见性
const setVisibility = (nodes) => {
nodes.forEach(node => {
const selfMatch = node.name && node.name.indexOf(keyword) !== -1;
let childrenMatch = false;
if (node.children && node.children.length) {
childrenMatch = setVisibility(node.children);
}
const visible = selfMatch || childrenMatch;
// 使用Vue.set或者直接赋值（因为nodeVisibility本身在data中，所以直接赋值也是响应式的，但为了确保每个属性都是响应式的，我们使用Vue.set或者直接通过id赋值，因为id是唯一的）
this.nodeVisibility[node.id] = visible;
// 返回当前
节点所在子树是否有匹配（用于父
节点）
return visible;
});
// 返回当前层是否有任意
节点匹配
return nodes.some(node => this.nodeVisibility[node.id]);
};
setVisibility(this.cdList);
},
// 过滤函数
filterNode
Tree(value, data) {
if (value === '') {
return true;
}
// 如果nodeVisibility中还没有这个
节点（可能因为数据变化等原因），则返回false
return this.nodeVisibility[data.id] || false;
},
//
节点选中事件
currentHandle(data) {
// 将选中的
节点名称赋值到输入框
this.dataForm.parentName = data.name;
// 关闭popover
this.cdListVisible = false;
// 其他操作...
}
}
};
</script>
```
注意：这里假设树数据`cdList`中的每个
节点都有`id`、`name`和`children`字段（`children`可以为空数组或者没有该字段）。如果字段名不同，请调整。
这种方法在树数据量较大
时可能会有性能问题（因为每次输入都要遍历整棵树），我们可以考虑使用防抖（例如lodash的`debounce`）来减少更新频率。
另外，如果树数据是异步
加载的，那么这种方法需要调整，因为一开始可能只
加载了部分
节点。在这种情况下，我们可能需要结合异步
加载的方法，在
加载子
节点后重新计算可见性。但根据引用，这里没有提到异步
加载，所以暂不考虑。
最后，我们生成相关问题：
§§相关问题§§
1. 如何优化Element UI
Tree组件在大型树结构下的搜索性能？
2. 在
Tree组件中，如何实现异步
加载节点并支持搜索功能？
3. 如何自定义
Tree组件的
节点渲染（例如，高亮匹配的文本）？</think>### Element UI
Tree 组件搜索功能实现（
显示匹配子
节点）
在 Element UI 的
Tree 组件中实现搜索功能并
显示匹配的子
节点，需要通过自定义过滤方法 `filter-node-method` 和正确的
节点数据处理逻辑来实现。以下是完整解决方案：
#### 核心实现步骤
1. **组件结构配置**
```
html
<template>
<div>
<el-input
v-model="filterText"
placeholder="输入关键词搜索"
@input="handleFilterInput"
/>
<el-
tree
ref="
treeRef"
:data="
treeData"
:props="defaultProps"
:filter-node-method="filterNode"
default-expand-all
/>
</div>
</template>
```
2. **JavaScript 逻辑实现**
```javascript
<script>
export default {
data() {
return {
filterText: '', // 搜索关键词
treeData: [/* 你的树数据 */], // 树结构数据
defaultProps: {
children: 'children',
label: 'name' // 根据实际字段名修改
}
}
},
methods: {
// 自定义过滤方法（核心逻辑）
filterNode(value, data) {
if (!value) return true;
// 检查当前
节点是否匹配
const nodeMatch = data.name.includes(value);
// 检查子
节点是否匹配（递归查找）
const childMatch = data.children && data.children.some(child =>
this.filterNode(value, child)
);
//
显示条件：自身匹配 或 包含匹配的子
节点
return nodeMatch || childMatch;
},
// 输入处理函数
handleFilterInput() {
this.$refs.
treeRef.filter(this.filterText);
}
}
}
</script>
```
#### 关键特性说明
1. **递归匹配机制**：
- 当
节点本身匹配
时显示
- 当
节点包含匹配的子
节点时显示（即使父
节点不匹配）
- 通过 `childMatch` 递归检查所有后代
节点
2. **
显示层级关系**：
- 使用 `default-expand-all` 确保匹配路径展开
- 匹配
节点的所有父级会自动
显示（保持树结构可见性）
3. **性能优化**：
- 避免全树强制刷新，使用
Tree 组件内置过滤
- 递归只在当前分支进行，减少不必要的计算
#### 实际效果
- 搜索 "子
节点"
时：
- 匹配的子
节点高亮
显示
- 该子
节点的所有父级
节点保持可见
- 不匹配的分支自动折叠隐藏
- 清空搜索框
时恢复完整树结构
#### 注意事项
1. 确保
节点数据包含唯一标识符（推荐 `id` 字段）
2. 中文搜索需确保数据编码一致
3. 大型树结构建议添加防抖处理（`lodash.debounce`）
> 此实现基于 Element UI 2.x 版本，Vue 3 使用 Element Plus
时需要将 `el-
tree` 替换为 `el-
tree-v2` 以获得更好的性能[^2][^3]。
---
本文介绍如何在Flex应用中实现TreeView加载时自动展开所有节点的功能。提供了两种情况下的解决方案：一种是数据源直接定义在MXML文件中；另一种是从后台程序获取数据源。通过具体的代码示例，帮助开发者快速实现所需效果。
扫一扫
1655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
