dk-plus

简体中文

English

简体中文

English

Appearance

目录

Select 选择器 ​

用于从一组选项中选择。

基础用法 ​

html
<template>
  <dk-select v-model="value" :options="options" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { label: '选项 A', value: 'A' },
  { label: '选项 B', value: 'B' },
  { label: '禁用项', 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: '选项 A', id: 'A' },
  { name: '选项 B', id: 'B' },
  { name: '禁用项', id: 'X', isDisabled: true }
]
const props = { label: 'name', value: 'id', disabled: 'isDisabled' }
</script>
展开

有禁用选项 ​

html
<template>
  <dk-select v-model="value" :options="options" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { label: '选项 A', value: 'A' },
  { label: '选项 B', value: 'B' },
  { label: '禁用项', value: 'X', disabled: true }
]
</script>
展开

禁用整个组件 ​

html
<template>
  <dk-select v-model="value" disabled :options="options" />
</template>
展开

可清空 ​

html
<template>
  <dk-select v-model="value" clearable :options="options" />
</template>
展开

尺寸 ​

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>
展开

基础多选 ​

选项 A
html
<template>
  <dk-select v-model="value" multiple :options="options" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(['A'])
</script>
展开

折叠标签 ​

选项 A
html
<template>
  <dk-select v-model="value" multiple collapse-tags :options="options" />
</template>
展开

最多折叠标签数 ​

选项 A
html
<template>
  <dk-select v-model="value" multiple collapse-tags :max-collapse-tags="1" :options="options" />
</template>
展开

自定义模板 ​

将内容插入到 dk-option 的默认插槽中即可自定义下拉项。

html
<template>
  <dk-select v-model="value">
    <dk-option label="北京" value="beijing">
      <span>北京</span>
      <span>Beijing</span>
    </dk-option>
  </dk-select>
</template>
展开

自定义下拉头部与底部 ​

html
<template>
  <dk-select v-model="value" :options="options">
    <template #header>...</template>
    <template #footer>...</template>
  </dk-select>
</template>
展开

将选项进行分组 ​

html
<template>
  <dk-select v-model="value">
    <dk-option-group label="热门城市">
      <dk-option label="上海" value="shanghai" />
      <dk-option label="北京" value="beijing" />
    </dk-option-group>
  </dk-select>
</template>
展开

使用值键 value-key ​

当绑定值是对象时，请指定 value-key 作为唯一标识。

html
<template>
  <dk-select v-model="value" :options="options" value-key="id" />
</template>
展开

自定义加载与空态 ​

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>
展开

远程搜索 ​

html
<template>
  <dk-select v-model="value" filterable remote :remote-method="remoteMethod" :loading="loading" :options="options" />
</template>
展开

Select 属性 ​

属性名说明类型默认值
model-value / v-model绑定值string | number | boolean | object | array''
options选项列表（数组模式）array[]
props选项字段映射（value/label/disabled/options）object-
disabled是否禁用booleanfalse
multiple是否多选booleanfalse
clearable是否可清空booleantrue
filterable是否可搜索booleanfalse
filter-method自定义过滤方法(query: string) => boolean-
remote是否远程搜索booleanfalse
remote-method远程搜索方法(query: string) => void-
debounce远程搜索防抖（ms）number300
loading是否加载中booleanfalse
loading-text加载中文案string'Loading'
no-match-text无匹配数据文案string'无匹配数据'
no-data-text无数据文案string'无数据'
placeholder占位符string'请选择'
width宽度string'240px'
size尺寸large / medium / small / mini-
value-key绑定值为对象时的唯一键string'value'
collapse-tags多选时是否折叠标签booleanfalse
max-collapse-tags最多显示多少个标签（折叠时）number1
popper-class下拉弹层 classstring''
popper-style下拉弹层样式string | object''
teleported是否 teleport 到 append-tobooleantrue
append-toteleport 目标string | HTMLElement'body'
offset弹层偏移number8
suffix-icon右侧箭头图标string'IconCaretDown'
clear-icon清空图标string'IconClose'

Select 插槽 ​

插槽名说明
default自定义下拉项（搭配 DkOption / DkOptionGroup）
header自定义下拉头部
footer自定义下拉底部
loading自定义 loading 内容
empty自定义空态内容

Select 事件 ​

事件名说明回调参数
update:modelValuev-model 更新(value)
change值变化(value)
clear清空-
visible-change下拉显示状态变化(visible: boolean)
focus聚焦(evt: FocusEvent)
blur失焦(evt: FocusEvent)
remove-tag多选移除某个 tag(tagValue)
popup-scroll下拉滚动(evt: Event)

Contributors ​

Mr.Fan