You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
973 B
49 lines
973 B
7 years ago
|
|
||
|
|
<cn>
|
||
|
|
#### 带搜索框
|
||
|
|
展开后可对选项进行搜索。
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Select with search field
|
||
|
|
Search the options while expanded.
|
||
|
|
</us>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<a-select
|
||
|
|
showSearch
|
||
|
|
placeholder="Select a person"
|
||
|
|
optionFilterProp="children"
|
||
|
|
style="width: 200px"
|
||
|
|
@focus="handleFocus"
|
||
|
|
@blur="handleBlur"
|
||
|
|
@change="handleChange"
|
||
|
|
:filterOption="filterOption"
|
||
|
|
>
|
||
|
|
<a-select-option value="jack">Jack</a-select-option>
|
||
|
|
<a-select-option value="lucy">Lucy</a-select-option>
|
||
|
|
<a-select-option value="tom">Tom</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
methods: {
|
||
|
|
handleChange (value) {
|
||
|
|
console.log(`selected ${value}`);
|
||
|
|
},
|
||
|
|
handleBlur() {
|
||
|
|
console.log('blur');
|
||
|
|
},
|
||
|
|
handleFocus() {
|
||
|
|
console.log('focus');
|
||
|
|
},
|
||
|
|
filterOption(input, option) {
|
||
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|