el-select filter-method具体使用
时间: 2024-01-11 09:02:55 浏览: 29
`el-select` 是一个基于 Element UI 的下拉选择框组件,`filter-method` 是这个组件的一个属性,用于自定义下拉列表的过滤方法。
具体使用方法如下:
1. 在 `el-select` 中设置 `filterable` 属性为 `true`,表示开启过滤功能。
2. 设置 `filter-method` 属性为一个函数,该函数接收两个参数:`query` 表示用户输入的过滤关键字,`option` 表示下拉列表中的每一项数据。函数需要返回一个布尔值,表示该项是否符合过滤条件。
3. 如果需要在过滤方法中使用异步请求,可以设置 `remote` 属性为 `true`,并设置 `loading` 属性为 `true` 来显示加载状态。
示例代码:
```html
<el-select v-model="selected" filterable :filter-method="filterMethod" :remote="true" :loading="loading">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
```javascript
export default {
data() {
return {
options: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'orange', label: '橙子' },
{ value: 'grape', label: '葡萄' }
],
selected: '',
loading: false
}
},
methods: {
filterMethod(query, option) {
return option.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
}
}
}
```
以上代码中,`filterMethod` 方法实现了根据关键字过滤下拉列表的功能。`remote` 属性设置为 `true`,表示需要异步请求数据,`loading` 属性控制加载状态的显示。