el-input模糊搜索
时间: 2025-02-20 13:24:18 浏览: 34
### 使用 `el-input` 实现模糊搜索
为了实现基于 Element UI 的 `el-input` 组件的模糊搜索功能,可以采用如下方式:
#### 子组件模板结构
在子组件中定义了一个带有 `v-model` 和事件监听器的 `<el-input>` 输入框以及一个展示数据的树形控件。
```html
<template>
<div>
<!-- 搜索框 -->
<el-input
v-model="deptName"
placeholder="请输入关键字"
clearable
size="small"
@input="treeInput"
prefix-icon="el-icon-search"
style="margin-bottom:20px;"
/>
<!-- 数据展示区 -->
<div class="head-container">
<el-tree :data="filteredTreeData" :props="defaultProps"/>
</div>
</div>
</template>
```
这里的关键在于通过 `@input` 监听输入变化并触发自定义方法 `treeInput()` 来处理逻辑[^1]。
#### 方法定义
每当用户改变输入框中的内容时,都会调用此函数并将新的值作为参数传递给它。接着可以通过 `$emit` 将这些信息发送回父级组件做进一步的数据过滤操作。
```javascript
methods:{
treeInput(val){
// 发送搜索条件至父组件执行过滤筛选
this.$emit('treeInput', val);
}
}
```
然而,在某些情况下可能希望直接在此处完成简单的本地过滤而不必依赖于外部帮助,则可以直接利用 Vue 计算属性来简化流程[^3]。
#### 利用计算属性进行本地过滤
如果不需要复杂的业务逻辑或跨组件通信的话,可以在同一个组件内使用计算属性来进行即时响应式的过滤工作。
```javascript
computed: {
filteredTreeData() {
const filterKey = this.deptName.toLowerCase().trim();
if (!filterKey) return this.treeData;
function matchNode(node, key) {
return node.label.toLowerCase().includes(key);
}
let resultNodes = [];
traverse(this.treeData);
function traverse(nodes) {
nodes.forEach((node) => {
if (matchNode(node, filterKey)) {
resultNodes.push({...node});
} else if (node.children && node.children.length > 0) {
traverse(node.children);
}
});
}
return resultNodes;
},
},
```
这段代码展示了如何根据用户的输入动态调整显示的内容列表。当 `deptName` 变化时,`filteredTreeData` 自动重新评估其返回值,并且视图也会相应地更新以反映最新的状态。
阅读全文
相关推荐


















