46 lines
873 B
Markdown
46 lines
873 B
Markdown
|
|
||
|
|
<cn>
|
||
|
|
#### 自定义选项
|
||
|
|
也可以直接传递slot="dataSource"的Option
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Customized
|
||
|
|
You could pass `slot="dataSource` as children of `AutoComplete`, instead of using `dataSource`。
|
||
|
|
</us>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<template>
|
||
|
|
<a-auto-complete
|
||
|
|
style="width: 200px"
|
||
|
|
@search="handleSearch"
|
||
|
|
placeholder="input here"
|
||
|
|
>
|
||
|
|
<template slot="dataSource">
|
||
|
|
<a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
|
||
|
|
</template>
|
||
|
|
</a-auto-complete>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
result: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleSearch(value) {
|
||
|
|
let result;
|
||
|
|
if (!value || value.indexOf('@') >= 0) {
|
||
|
|
result = [];
|
||
|
|
} else {
|
||
|
|
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
|
||
|
|
}
|
||
|
|
this.result = result
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|