el-select 组件可以通过设置 filterable 属性来实现本地搜索数据。
- HTML 模板:
<template>
<el-select
v-model="selectedValue"
filterable
placeholder="请选择"
@filter-method="filterMethod"
>
<el-option
v-for="item in filteredOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
- JavaScript 代码:
<script>
export default {
data() {
return {
selectedValue: '',
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
{ value: 'option4', label: 'Option 4' },
{ value: 'option5', label: 'Option 5' },
],
filteredOptions: []
}
},
created() {
this.filteredOptions = this.options;
},
methods: {
filterMethod(query) {
if (query !== '') {
this.filteredOptions = this.options.filter(item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
} else {
this.filteredOptions = this.options;
}
}
}
}
</script>
在这个例子中:
-
我们设置了
filterable
属性来启用过滤功能。 -
我们使用
@filter-method
来绑定一个自定义的过滤方法filterMethod
。 -
在
data
中,我们定义了options
数组来存储所有选项,以及filteredOptions
数组来存储过滤后的选项。 -
在
created
钩子中,我们初始化filteredOptions
为所有选项。 -
在
filterMethod
方法中,我们根据输入的查询字符串query
来过滤选项。如果query
不为空,我们使用filter
方法来筛选那些标签包含查询字符串的选项(不区分大小写)。如果query
为空,我们显示所有选项。 -
在模板中,我们遍历
filteredOptions
而不是options
,这样就可以只显示过滤后的选项。
关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓