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