vxe-select 模糊搜索
时间: 2023-10-27 12:06:52 浏览: 422
select模糊查询
5星 · 资源好评率100%
可以使用 vxe-select 的 filter-method 属性来实现模糊搜索。具体实现方法如下:
1. 在 vxe-select 中添加 filter-method 属性,并将其值设置为一个函数,该函数接收两个参数:value 和 option,分别表示当前输入的值和下拉选项中的每一项。
2. 在 filter-method 函数中,使用 value 和 option 进行比较,如果 option 中包含 value,则返回 true,否则返回 false。
3. 在 vxe-select 中添加 clearable 属性,以便用户可以清除搜索框中的内容。
下面是一个示例代码:
```html
<template>
<vxe-select
v-model="selected"
:options="options"
:filter-method="filterMethod"
clearable
></vxe-select>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Cherry', value: 'cherry' },
{ label: 'Durian', value: 'durian' },
{ label: 'Elderberry', value: 'elderberry' }
]
}
},
methods: {
filterMethod(value, option) {
return option.label.toLowerCase().indexOf(value.toLowerCase()) > -1
}
}
}
</script>
```
阅读全文