el-tree 和 el-select 结合时如何实现模糊搜索？

### 实现 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` 监听节点点击事件，将选中的节点信息赋值给表单字段。 - **性能优化**：对于大型树结构，建议采用懒加载策略以提升渲染效率。 --- ###