el-select filter-method的用法
时间: 2024-01-05 21:03:31 浏览: 31
el-select的filter-method是用来自定义筛选选项的方法。它接受一个函数作为参数,该函数在每次选项被过滤时被调用。
filter-method函数接收两个参数:第一个参数是当前输入的关键字,第二个参数是当前选项。函数需要返回一个布尔值,用于判断该选项是否符合过滤条件。
下面是一个示例:
```html
<template>
<div>
<el-select v-model="selectedOption" filterable :filter-method="filterOptions">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
{ value: '4', label: 'Option 4' }
]
}
},
methods: {
filterOptions(input, option) {
// 过滤条件为选项的label包含输入的关键字
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
}
}
</script>
```
上述示例中,我们使用了el-select组件,并开启了filterable属性,使得下拉选项可过滤。我们通过设置filter-method属性为filterOptions方法来自定义过滤选项的方式。
filterOptions方法中,我们通过判断选项的label是否包含了输入的关键字来决定该选项是否显示。如果包含了关键字,返回true,否则返回false。
这样,当我们在el-select中输入关键字时,只有包含该关键字的选项会被显示出来,其他选项则会被过滤掉。