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

40 lines
895 B
Markdown
Raw Normal View History

2018-02-28 11:07:04 +00:00
<cn>
#### 自定义选项
也可以直接传递slot="dataSource"的Option
</cn>
<us>
#### Customized
You could pass `slot="dataSource` as children of `AutoComplete`, instead of using `dataSource`
</us>
```html
<template>
2019-09-28 12:45:07 +00:00
<a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">
2018-02-28 11:07:04 +00:00
<template slot="dataSource">
2019-09-28 12:45:07 +00:00
<a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
2018-02-28 11:07:04 +00:00
</template>
</a-auto-complete>
</template>
<script>
2019-09-28 12:45:07 +00:00
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;
},
2018-02-28 11:07:04 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-02-28 11:07:04 +00:00
</script>
```