el-input 边输入边查询

### 如何使用 `el-input` 实现边输入边查询 为了实现在用户输入时动态查询的功能，可以利用 Vue 和 Element UI 提供的强大功能。具体来说，通过监听 `@input` 事件并结合计算属性或方法来触发后台请求或其他逻辑操作。 下面是一个完整的示例代码片段： ```html <template> <div> <!-- 输入框 --> <el-input v-model="searchQuery" placeholder="请输入关键字进行搜索..." @input="debounceSearch"> </el-input> <!-- 显示结果列表 --> <ul v-if="filteredItems.length > 0"> <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li> </ul> <!-- 如果没有找到任何匹配项，则提示 --> <p v-else>未找到相关内容</p> </div> </template> <script> export default { data() { return { searchQuery: '', // 用户输入的内容 allItems: ['苹果', '香蕉', '橙子', '葡萄'], // 假设的数据源 debounceTimer: null, }; }, computed: { // 计算过滤后的项目列表 filteredItems() { if (this.searchQuery === '') return []; const query = this.searchQuery.toLowerCase(); return this.allItems.filter(item => item.toLowerCase().includes(query)); } }, methods: { // 防抖处理函数，防止频繁调用API debounceSearch(value) { clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { console.log('执行实际的查询:', value); // 这里可以替换为发送HTTP请求等异步操作 }, 300); // 设置延迟时间为300毫秒 } } }; </script> ``` 上述代码展示了如何基于用户的输入即时筛选本地数据[^4]。如果需要连接服务器端接口获取远程数据，可以在 `debounceSearch` 方法内部发起 HTTP 请求，并将响应结果赋给一个新数组用于渲染。 #### 关键点说明： - **防抖机制**：为了避免每次按键都立即触发昂贵的操作（比如网络请求），这里采用了简单的防抖技术，即等待一定时间后再真正执行查询动作。 - **计算属性的应用**：`filteredItems` 是一个依赖于 `searchQuery` 的计算属性，它会在 `searchQuery` 发生变化时自动重新计算，从而达到实时更新的效果。 - **模板部分**：除了基本的 `el-input` 外，还包含了条件渲染的结果展示区域以及无结果时的友好提示。