mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
96 lines
1.5 KiB
Markdown
96 lines
1.5 KiB
Markdown
# 异步加载（单选）
|
|
异步单选的例子。
|
|
```html
|
|
<n-select
|
|
v-model:value="value"
|
|
filterable
|
|
placeholder="搜索歌曲"
|
|
:options="options"
|
|
:loading="loading"
|
|
clearable
|
|
remote
|
|
@search="handleSearch"
|
|
/>
|
|
```
|
|
```js
|
|
const options = [
|
|
{
|
|
label: 'Drive My Car',
|
|
value: 'song1'
|
|
},
|
|
{
|
|
label: 'Norwegian Wood',
|
|
value: 'song2'
|
|
},
|
|
{
|
|
label: 'You Won\'t See',
|
|
value: 'song3'
|
|
},
|
|
{
|
|
label: 'Nowhere Man',
|
|
value: 'song4'
|
|
},
|
|
{
|
|
label: 'Think For Yourself',
|
|
value: 'song5'
|
|
},
|
|
{
|
|
label: 'The Word',
|
|
value: 'song6'
|
|
},
|
|
{
|
|
label: 'Michelle',
|
|
value: 'song7'
|
|
},
|
|
{
|
|
label: 'What goes on',
|
|
value: 'song8'
|
|
},
|
|
{
|
|
label: 'Girl',
|
|
value: 'song9'
|
|
},
|
|
{
|
|
label: 'I\'m looking through you',
|
|
value: 'song10'
|
|
},
|
|
{
|
|
label: 'In My Life',
|
|
value: 'song11'
|
|
},
|
|
{
|
|
label: 'Wait',
|
|
value: 'song12'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
value: null,
|
|
loading: false,
|
|
options: [],
|
|
noDataContent: 'please search',
|
|
handleSearch: (query) => {
|
|
if (!query.length) {
|
|
this.options = []
|
|
this.noDataContent = 'please search'
|
|
return
|
|
}
|
|
this.loading = true
|
|
window.setTimeout(() => {
|
|
this.options = options.filter(item => ~item.label.indexOf(query))
|
|
if (!this.options.length) this.noDataContent = 'no result found'
|
|
this.loading = false
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
```css
|
|
.n-select {
|
|
width: 180px;
|
|
margin: 0 12px 8px 0;
|
|
}
|
|
``` |