el-tree 和 el-select 结合时如何实现模糊搜索?
时间: 2025-07-01 14:00:49 浏览: 8
### 实现 el-tree 和 el-select 结合的模糊搜索功能
在 Vue 项目中,结合 `el-select` 和 `el-tree` 组件可以实现树形结构的选择器,并通过内置的过滤方法实现模糊搜索功能。该组合特别适用于需要从多级层级数据中进行选择的场景,例如组织架构、权限配置等。
为了实现模糊搜索,可以通过 `filter-method` 属性绑定一个自定义的过滤函数,并将该函数作用于 `el-tree` 的 `filter-node-method` 上。这样,当用户在输入框中输入关键词时,会触发对树节点的动态过滤[^2]。
#### 示例代码
```vue
<template>
<el-form-item label="跟进人">
<el-select
ref="select"
class="custom-input-width"
v-model="formData.employeeName"
placeholder="请选择"
collapse-tags
filterable
:filter-method="typeFilter"
clearable
>
<el-tree
:filter-node-method="filterNode"
ref="selectTree"
@node-click="onEmployeeChange"
slot="empty"
:data="deptOptions"
:props="{ children: 'children', label: 'label' }"
></el-tree>
</el-select>
</el-form-item>
</template>
<script>
export default {
data() {
return {
formData: {
employeeName: null,
},
deptOptions: [
{
id: 1,
label: '张一',
children: [
{ id: 2, label: '张二', children: [] },
{ id: 3, label: '张三', children: [] },
],
},
{
id: 4,
label: '王一',
children: [
{ id: 5, label: '王二', children: [] },
{ id: 6, label: '王三', children: [] },
],
},
],
};
},
methods: {
typeFilter(value) {
this.$refs.selectTree.filter(value);
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
onEmployeeChange(data) {
this.formData.employeeName = data.label;
},
},
};
</script>
```
上述代码中,`typeFilter` 方法用于触发 `el-tree` 的 `filter` 函数,传入用户输入的值;而 `filterNode` 是实际执行节点过滤的方法,它根据节点名称是否包含输入内容来决定是否显示该节点。
#### 数据绑定与交互优化
- **双向绑定**:使用 `v-model` 绑定选中的节点标签,便于在表单中展示选中结果。
- **事件监听**:通过 `@node-click` 监听节点点击事件,将选中的节点信息赋值给表单字段。
- **性能优化**:对于大型树结构,建议采用懒加载策略以提升渲染效率。
---
###
阅读全文
相关推荐


















