el-select下拉选项带搜索框
时间: 2025-02-10 19:06:37 浏览: 63
### Element UI `el-select` 组件添加搜索框功能
为了使 `el-select` 支持搜索功能,可以设置属性 `filterable` 为 true。这允许用户通过输入关键字来过滤选项列表[^1]。
下面是一个简单的实现例子:
```html
<template>
<div>
<!-- 使用 filterable 属性启用搜索 -->
<el-select v-model="selectedValue" placeholder="请选择" filterable>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ id: '1', name: 'Option One' },
{ id: '2', name: 'Option Two' }
]
};
}
};
</script>
```
当设置了 `filterable` 后,组件会自动提供一个内置的搜索栏让用户能够快速定位所需的选项项。此外还可以配置其他参数来自定义筛选行为,比如远程搜索时可利用 `remote-method` 和 `loading` 来处理异步数据加载逻辑[^2]。
阅读全文
相关推荐

















