element plus输入框/下拉框实现自动搜索

### 使用 Element Plus 实现带有分页和搜索功能的自定义下拉框组件 为了创建一个既具备分页又拥有搜索能力的 `el-select` 组件，可以采用组合式 API 的方式来增强原有的选择器。这不仅能够解决当选项数量庞大时性能下降的问题，还能提供更好的用户体验。 #### 1. 创建基础结构 首先引入必要的依赖项并初始化项目： ```javascript import { defineComponent, ref, watch } from 'vue'; import { ElSelect, ElOption, ElInput } from 'element-plus'; export default defineComponent({ components: { ElSelect, ElOption, ElInput, }, }); ``` #### 2. 添加状态管理 接着设置响应式的属性用于控制页面切换以及过滤条件： ```javascript const currentPage = ref(1); const pageSize = ref(10); // 每页显示条目数 const searchQuery = ref(''); // 用户输入的关键字查询字符串 const options = ref([]); // 当前可见的数据列表 const totalItems = ref(0); // 总记录数 ``` #### 3. 处理数据获取逻辑 编写异步函数负责从服务器端请求分页后的数据集，并更新本地存储的状态变量： ```javascript async function fetchOptions() { try { const response = await axios.get('/api/options', { params: { page: currentPage.value, size: pageSize.value, q: searchQuery.value.trim(), } }); if (response.data && Array.isArray(response.data.items)) { options.value = response.data.items; totalItems.value = response.data.total || 0; } } catch(error) { console.error("Failed to load options", error); } } ``` 每当用户改变当前页码或是修改了筛选条件时都应该重新调用此方法刷新视图中的内容[^2]。 #### 4. 构建模板部分 最后一步是在 HTML 结构里加入相应的标记语言描述界面布局： ```html <template> <div class="custom-select-container"> <!-- 输入框 --> <ElInput v-model="searchQuery" placeholder="请输入关键字..." @input="handleSearch"></ElInput> <!-- 下拉菜单 --> <ElSelect :loading="isLoading" filterable remote clearable reserve-keyword :remote-method="fetchOptions" style="width: 100%;"> <!-- 动态渲染option标签 --> <ElOption v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"/> <!-- 如果还有更多，则添加加载更多的按钮 --> <li slot="empty" v-if="totalItems > currentPage * pageSize" class="load-more-button" @click.stop.prevent="loadMore">点击加载更多</li> </ElSelect> </div> </template> ``` 这里特别需要注意的是 `slot="empty"` 属性的应用场景——它会在没有任何匹配项的情况下被触发；而通过监听其上的点击事件则可实现懒加载效果[^4]。 #### 5. 完善交互细节 还需补充一些辅助性的处理程序以完善整体行为模式： ```javascript function handleSearch(queryString) { currentPage.value = 1; // 搜索重置回到第一页 searchString.value = queryString; } // 加载更多 function loadMore(){ ++currentPage.value; fetchOptions(); } ``` 以上便是利用 Element Plus 库构建了一个支持分页与实时检索特性的高级版 `<el-select>` 控件的大致过程。