dk-plusSelect
Select a value from options.
Basic
html
<template>
<dk-select v-model="value" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
{ label: 'Option A', value: 'A' },
{ label: 'Option B', value: 'B' },
{ label: 'Disabled', value: 'X', disabled: true }
]
</script>展开
Options
html
<template>
<dk-select v-model="value" :options="options" :props="props" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
{ name: 'Option A', id: 'A' },
{ name: 'Option B', id: 'B' },
{ name: 'Disabled', id: 'X', isDisabled: true }
]
const props = { label: 'name', value: 'id', disabled: 'isDisabled' }
</script>展开
Disabled Option
html
<template>
<dk-select v-model="value" :options="options" />
</template>展开
Disabled
html
<template>
<dk-select v-model="value" disabled :options="options" />
</template>展开
Clearable
html
<template>
<dk-select v-model="value" clearable :options="options" />
</template>展开
Size
html
<template>
<dk-select v-model="value" size="large" :options="options" />
<dk-select v-model="value" size="medium" :options="options" />
<dk-select v-model="value" size="small" :options="options" />
<dk-select v-model="value" size="mini" :options="options" />
</template>展开
Multiple
html
<template>
<dk-select v-model="value" multiple :options="options" />
</template>展开
Collapse Tags
html
<template>
<dk-select v-model="value" multiple collapse-tags :options="options" />
</template>展开
Max Collapse Tags
html
<template>
<dk-select v-model="value" multiple collapse-tags :max-collapse-tags="1" :options="options" />
</template>展开
Custom Option Template
html
<template>
<dk-select v-model="value">
<dk-option label="Beijing" value="beijing">...</dk-option>
</dk-select>
</template>展开
Custom Dropdown Header/Footer
html
<template>
<dk-select v-model="value" :options="options">
<template #header>...</template>
<template #footer>...</template>
</dk-select>
</template>展开
Option Group
html
<template>
<dk-select v-model="value">
<dk-option-group label="Popular cities">
<dk-option label="Shanghai" value="shanghai" />
<dk-option label="Beijing" value="beijing" />
</dk-option-group>
</dk-select>
</template>展开
Value Key
When binding value is an object, set value-key as the unique key.
html
<template>
<dk-select v-model="value" :options="options" value-key="id" />
</template>展开
Custom Loading & Empty
html
<template>
<dk-select v-model="value" loading>
<template #loading>...</template>
</dk-select>
<dk-select v-model="value" :options="[]">
<template #empty>...</template>
</dk-select>
</template>展开
Remote Search
html
<template>
<dk-select v-model="value" filterable remote :remote-method="remoteMethod" :loading="loading" :options="options" />
</template>展开
Props
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | string | number | boolean | object | array | '' |
| options | options list (array mode) | array | [] |
| props | field mapping (value/label/disabled/options) | object | - |
| disabled | disabled | boolean | false |
| multiple | multiple | boolean | false |
| clearable | clearable | boolean | true |
| filterable | filterable | boolean | false |
| filter-method | custom filter method | (query: string) => boolean | - |
| remote | remote search | boolean | false |
| remote-method | remote method | (query: string) => void | - |
| debounce | debounce(ms) | number | 300 |
| loading | loading | boolean | false |
| loading-text | loading text | string | 'Loading' |
| no-match-text | no match text | string | '无匹配数据' |
| no-data-text | no data text | string | '无数据' |
| placeholder | placeholder | string | '请选择' |
| width | width | string | '240px' |
| size | size | large / medium / small / mini | - |
| value-key | unique key when value is object | string | 'value' |
| collapse-tags | collapse tags (multiple) | boolean | false |
| max-collapse-tags | max tags shown | number | 1 |
| popper-class | dropdown class | string | '' |
| popper-style | dropdown style | string | object | '' |
| teleported | teleported | boolean | true |
| append-to | teleport target | string | HTMLElement | 'body' |
| offset | dropdown offset | number | 8 |
| suffix-icon | suffix icon | string | 'IconCaretDown' |
| clear-icon | clear icon | string | 'IconClose' |
Slots
| Name | Description |
|---|---|
| default | custom options (with DkOption / DkOptionGroup) |
| header | dropdown header |
| footer | dropdown footer |
| loading | loading content |
| empty | empty content |
Events
| Name | Description | Params |
|---|---|---|
| update:modelValue | v-model update | (value) |
| change | value changed | (value) |
| clear | cleared | - |
| visible-change | dropdown visibility | (visible: boolean) |
| focus | focus | (evt: FocusEvent) |
| blur | blur | (evt: FocusEvent) |
| remove-tag | remove a tag (multiple) | (tagValue) |
| popup-scroll | dropdown scroll | (evt: Event) |
Contributors
