ant-design-vue/components/auto-complete/demo/options.md

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>
```