el-select 组件设置filterable属性后，实现搜索不到数据时保留输入的内容

### ElementUI 中 `el-select` 组件远程搜索性能优化 #### 使用远程搜索方法 (`remote-method`) 为了防止大量数据一次性加载到前端而引起的卡顿，可以采用分页查询的方式通过服务器端来处理数据过滤。当用户输入关键字时，调用自定义的 `remote-method` 函数向后台发送请求，并传入当前用户的输入作为参数，在返回的结果中仅包含匹配项。 ```javascript methods: { querySearch(queryString, cb) { this.$axios.get('/api/search', { params: { q: queryString } }) .then(response => { const results = response.data.items.map(item => ({ value: item.name, id: item.id })); // 调用 callback 返回建议列表 cb(results); }); } } ``` 此方式减少了初始加载时间以及每次交互后的响应延迟[^1]。 #### 实现滚动加载 (`el-select-loadmore`) 除了按需加载外，还可以考虑增加懒加载机制——即随着用户向下滚动自动追加更多项目。这不仅提高了用户体验还降低了初次渲染的压力。具体做法是在原有基础上加入监听器检测到底部位置并触发新的 API 请求获取额外记录： ```html <template> <div class="example"> <!-- ... --> <ul v-if="loadingMore" style="text-align:center;"> <li>Loading...</li> </ul> </div> </template> <script> export default { data() { return { loadingMore: false, page: 1, pageSize: 20, options: [] }; }, methods: { handleScroll(event) { const bottom = event.target.scrollHeight - Math.ceil(event.target.scrollTop + event.target.clientHeight); if (bottom <= 0 && !this.loadingMore) { this.loadMore(); } }, loadMore() { this.loadingMore = true; setTimeout(() => { this.page++; this.fetchData().finally(() => { this.loadingMore = false; }); }, 500); // 模拟网络延时 }, fetchData() { return new Promise((resolve) => resolve([ /* 新增的数据 */ ]) ).then((newOptions) => { this.options.push(...newOptions); }); } } }; </script> ``` 上述代码片段展示了如何结合 Vue 的生命周期钩子与事件处理器完成这一功能[^4]。 #### 处理回显问题 针对某些场景下的回显需求，可以在初始化阶段预先加载必要的选项，或者调整逻辑使得即使在本地找不到对应 ID 的时候也能正确显示已选中的值而不必每次都依赖完整的远端数据集。此外，也可以尝试缓存最近使用的几个版本以提高效率[^2]。 ---