naive-ui/demo/components/selectDemo/multipleSelect.demo.vue
2019-08-22 18:15:48 +08:00

101 lines
2.1 KiB
Vue

<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Multiple Select
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-select
v-model="selectedArray"
multiple
placeholder="Please Select Type"
:options="options"
style="margin-right: 12px; width: 320px;"
/>
<n-select
v-model="selectedArray"
multiple
size="small"
placeholder="Please Select Type"
:options="options"
style="margin-right: 12px; width: 320px;"
/>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">v-model: {{ JSON.stringify(selectedArray) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
selectedArray: ['song1'],
options: [
{
label: "Everybody's Got Something to Hide Except Me and My Monkey",
value: 'song0'
},
{
label: 'Drive My Car',
value: 'song1',
disabled: true
},
{
label: 'Norwegian Wood',
value: 'song2'
},
{
label: 'You Won\'t See',
value: 'song3',
disabled: true
},
{
label: 'Nowhere Man',
value: 'song4'
},
{
label: 'Think For Yourseld',
value: 'song5'
},
{
label: 'The Word',
value: 'song6'
},
{
label: 'Michelle',
value: 'song7',
disabled: true
},
{
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'
}
]
}
}
}
</script>