Table-select 下拉表格
基础用法-单选
默认用法
搜索
: 1
自定义搜索
远程搜索
vue
<template>
<div class="">
<p>默认用法</p>
<div class="flex flex-wrap gap-4 items-center">
<w-table-select
ref="selectTable"
v-model="value1"
clearable
placeholder="请选择"
style="width: 240px"
table-width="600px"
:options="data"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
@header-dragend="handleHeaderDragend"
@change="handleChange"
>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
<template #number="{ row }">
<w-input-number v-model="row.number" :min="0" @click.stop>
<template #suffix>
<span>{{ row.unit }}</span>
</template>
</w-input-number>
</template>
</w-table-select>
<w-table-select
v-model="value1"
style="width: 240px"
disabled
size="small"
clearable
placeholder="请选择"
:options="data"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
</w-table-select>
</div>
</div>
<div class="mt-4">
<p>搜索</p>
<div class="flex flex-wrap gap-4 items-center">
<w-table-select
ref="selectTable"
v-model="value1"
clearable
table-size="small"
filterable
placeholder="内置搜索"
style="width: 240px"
:options="data"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
<template #header> 表格高度：28px </template>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
</w-table-select>
<w-table-select
v-model="value2"
clearable
filterable
placeholder="自定义搜索"
style="width: 240px"
:options="data1"
:columns="columns"
:filter-method="filterMethod"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
/>
<w-table-select
v-model="value3"
clearable
filterable
remote
:loading="loading"
reserve-keyword
placeholder="远程搜索"
style="width: 240px"
:options="data2"
:columns="columns"
:remote-method="remoteMethod"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #loading>
<w-icon class="is-loading">
<Loading />
</w-icon>
</template>
</w-table-select>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Loading } from '@win-design-next/icons-vue'
type Row = {
value: string
name: string
size: string
count: number
unit: string
price: string
total: string
disabled?: boolean
number: number
}
const value1 = ref('1')
const value2 = ref()
const value3 = ref()
const loading = ref(false)
const handleChange = (val: string, row: Row) => {
console.log(val, row)
}
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
data2.value = data.value.filter((item) => {
return item.name.toLowerCase().includes(query.toLowerCase())
})
}, 600)
} else {
data2.value = []
}
}
const data1 = ref<Row[]>([])
const data2 = ref<Row[]>([])
const data = ref<Row[]>([
{
number: 1,
value: '1',
name: '氯化钠注射液',
size: '100ml/袋',
count: 1,
unit: '袋',
price: '6.00',
total: '6.00',
},
{
number: 1,
value: '2',
name: '葡萄糖注射液',
size: '250ml/瓶',
count: 1,
unit: '瓶',
price: '12.00',
total: '12.00',
},
{
number: 1,
value: '3',
name: '补液盐III',
size: '10g/袋',
count: 2,
unit: '袋',
price: '3.00',
total: '6.00',
},
{
number: 1,
value: '4',
name: '脑心通胶囊',
size: '0.4g/粒',
count: 24,
unit: '粒',
price: '1.50',
total: '36.00',
},
{
number: 1,
value: '5',
name: '维生素C片',
size: '100mg/片',
count: 60,
unit: '片',
price: '0.30',
total: '18.00',
},
{
number: 1,
value: '6',
name: '氨咖黄敏胶囊',
size: '0.5g/粒',
count: 12,
unit: '粒',
price: '1.20',
total: '14.40',
},
{
number: 1,
value: '7',
name: '布洛芬缓释胶囊',
size: '300mg/粒',
count: 20,
unit: '粒',
price: '5.00',
total: '100.00',
},
{
number: 1,
value: '8',
name: '阿莫西林胶囊',
size: '250mg/粒',
count: 24,
unit: '粒',
price: '3.50',
total: '84.00',
},
{
number: 1,
value: '9',
name: '头孢克肟胶囊',
size: '100mg/粒',
count: 6,
unit: '粒',
price: '8.00',
total: '48.00',
},
{
number: 1,
value: '10',
name: '蒙脱石散',
size: '3g/袋',
count: 12,
unit: '袋',
price: '4.50',
total: '54.00',
},
{
number: 1,
value: '11',
name: '维生素B族片',
size: '复合/片',
count: 60,
unit: '片',
price: '0.40',
total: '24.00',
},
{
number: 1,
value: '12',
name: '甲硝唑片',
size: '200mg/片',
count: 20,
unit: '片',
price: '0.50',
total: '10.00',
},
{
number: 1,
value: '13',
name: '人工牛黄甲硝唑胶囊',
size: '0.3g/粒',
count: 24,
unit: '粒',
price: '1.80',
total: '43.20',
},
{
number: 1,
value: '14',
name: '氯雷他定片',
size: '10mg/片',
count: 12,
unit: '片',
price: '1.20',
total: '14.40',
},
{
number: 1,
value: '15',
name: '奥美拉唑肠溶胶囊',
size: '20mg/粒',
count: 14,
unit: '粒',
price: '2.50',
total: '35.00',
},
{
number: 1,
value: '16',
name: '盐酸左氧氟沙星片',
size: '100mg/片',
count: 14,
unit: '片',
price: '2.80',
total: '39.20',
},
{
number: 1,
value: '17',
name: '板蓝根颗粒',
size: '10g/袋',
count: 20,
unit: '袋',
price: '1.00',
total: '20.00',
},
{
number: 1,
value: '18',
name: '感冒灵颗粒',
size: '10g/袋',
count: 12,
unit: '袋',
price: '1.50',
total: '18.00',
},
{
number: 1,
value: '19',
name: '小儿氨酚黄那敏颗粒',
size: '5g/袋',
count: 12,
unit: '袋',
price: '1.80',
total: '21.60',
},
{
number: 1,
value: '20',
name: '藿香正气水',
size: '10ml/支',
count: 10,
unit: '支',
price: '1.00',
total: '10.00',
},
{
number: 1,
value: '21',
name: '蒲地蓝消炎口服液',
size: '10ml/支',
count: 6,
unit: '支',
price: '3.00',
total: '18.00',
},
{
number: 1,
value: '22',
name: '健胃消食片',
size: '0.5g/片',
count: 32,
unit: '片',
price: '0.50',
total: '16.00',
},
{
number: 1,
value: '23',
name: '复方甘草片',
size: '0.3g/片',
count: 100,
unit: '片',
price: '0.10',
total: '10.00',
},
{
number: 1,
value: '24',
name: '氯化钾缓释片',
size: '0.5g/片',
count: 20,
unit: '片',
price: '0.80',
total: '16.00',
},
{
number: 1,
value: '25',
name: '硫酸镁注射液',
size: '10ml/支',
count: 1,
unit: '支',
price: '4.00',
total: '4.00',
},
{
number: 1,
value: '26',
name: '维生素D滴剂',
size: '400IU/粒',
count: 30,
unit: '粒',
price: '0.60',
total: '18.00',
},
{
number: 1,
value: '27',
name: '复方阿司匹林片',
size: '100mg/片',
count: 20,
unit: '片',
price: '0.90',
total: '18.00',
},
{
number: 1,
value: '28',
name: '止咳糖浆',
size: '100ml/瓶',
count: 1,
unit: '瓶',
price: '8.00',
total: '8.00',
},
{
number: 1,
value: '29',
name: '黄连素片',
size: '100mg/片',
count: 24,
unit: '片',
price: '0.40',
total: '9.60',
},
{
number: 1,
value: '30',
name: '清热消炎宁片',
size: '0.4g/片',
count: 24,
unit: '片',
price: '0.70',
total: '16.80',
},
])
const columns = ref([
{
type: 'index',
width: '60',
label: '序号',
fixed: 'left',
},
{
prop: 'value',
label: 'id',
width: '60',
fixed: 'left',
showOverflowTooltip: true,
},
{
prop: 'name',
label: '药品名称',
width: '130',
showOverflowTooltip: true,
},
{
label: '规格',
prop: 'size',
width: '130',
},
{
label: '数量',
prop: 'number',
width: '170',
},
{
label: '单价(元)',
prop: 'price',
width: '100',
align: 'right',
},
{
label: '金额(元)',
prop: 'total',
align: 'right',
},
])
const filterMethod = (value: string, row: any) => {
data1.value = data.value.filter((item) => item.name.includes(value))
}
const handleHeaderDragend = (
newWidth: number,
oldWidth: number,
column: any,
e: DragEvent
) => {
console.log(newWidth, oldWidth, column, e)
}
</script>隐藏源代码
基础用法-多选
默认用法
请选择
搜索
自定义搜索
远程搜索
vue
<template>
<div class="">
<p>默认用法</p>
<div class="flex flex-wrap gap-4 items-center">
<w-table-select
v-model="value1"
clearable
placeholder="请选择"
multiple
collapse-tags
style="width: 240px"
:options="options"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
@change="handleChange"
>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
<template #footer>
已选
<span style="color: var(--w3-color-primary)">{{
value1.length
}}</span>
条
</template>
</w-table-select>
<w-table-select
v-model="value4"
clearable
placeholder="请选择"
multiple
collapse-tags
style="width: 240px"
:options="options"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #tag="{ data }">
<w-tag v-for="item in data" :key="item" size="mini">
{{ item.currentLabel }} - {{ item.value }}
</w-tag>
</template>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
<template #footer>
已选
<span style="color: var(--w3-color-primary)">{{
value1.length
}}</span>
条
</template>
</w-table-select>
<w-table-select
v-model="value1"
style="width: 240px"
disabled
size="small"
clearable
multiple
collapse-tags
placeholder="请选择"
:options="options"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
</w-table-select>
</div>
</div>
<div class="mt-4">
<p>搜索</p>
<div class="flex flex-wrap gap-4 items-center">
<w-table-select
v-model="value1"
clearable
multiple
collapse-tags
filterable
placeholder="内置搜索"
style="width: 240px"
:options="options"
:columns="columns"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
<template #name="{ row }">
<span style="color: var(--w3-color-primary)"
>{{ row.name }} - {{ row.size }}</span
>
</template>
<template #footer>
已选
<span style="color: var(--w3-color-primary)">{{
value1.length
}}</span>
条
</template>
</w-table-select>
<w-table-select
v-model="value2"
clearable
filterable
placeholder="自定义搜索"
style="width: 240px"
:options="data1"
multiple
collapse-tags
:columns="columns"
:filter-method="filterMethod"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #footer>
已选
<span style="color: var(--w3-color-primary)">{{
value1.length
}}</span>
条
</template>
</w-table-select>
<w-table-select
v-model="value3"
clearable
filterable
remote
multiple
collapse-tags
:loading="loading"
reserve-keyword
placeholder="远程搜索"
style="width: 240px"
:options="data2"
:columns="columns"
:remote-method="remoteMethod"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #footer>
已选
<span style="color: var(--w3-color-primary)">{{
value3.length
}}</span>
条
</template>
</w-table-select>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
type Row = {
value: string
name: string
size: string
count: string
unit: string
price: string
total: string
disabled?: boolean
}
const value1 = ref(['1'])
const value2 = ref([])
const value4 = ref([])
const value3 = ref([])
const loading = ref(false)
const handleChange = (val: string[], rows: Row[]) => {
console.log(val, rows)
}
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
data2.value = options.value.filter((item) => {
return item.name.toLowerCase().includes(query.toLowerCase())
})
}, 600)
} else {
data2.value = []
}
}
const data1 = ref<Row[]>([])
const data2 = ref<Row[]>([])
const options = ref<Row[]>([
{
value: '1',
name: '炔诺酮片',
size: '625微克/片',
count: '10',
unit: '片',
price: '10.00',
total: '100.00',
},
{
value: '2',
name: '布洛芬缓释胶囊',
size: '300mg/粒',
count: '20',
unit: '粒',
price: '5.00',
total: '100.00',
},
{
value: '3',
name: '阿莫西林胶囊',
size: '250mg/粒',
count: '24',
unit: '粒',
price: '3.50',
total: '84.00',
},
{
value: '4',
name: '维生素C片',
size: '100mg/片',
count: '60',
unit: '片',
price: '0.30',
total: '18.00',
},
{
value: '5',
name: '葡萄糖注射液',
size: '250ml/瓶',
count: '1',
unit: '瓶',
price: '12.00',
total: '12.00',
},
{
value: '6',
name: '氯化钠注射液',
size: '100ml/袋',
count: '1',
unit: '袋',
price: '6.00',
total: '6.00',
},
{
value: '7',
name: '盐酸左氧氟沙星',
size: '100mg/片',
count: '14',
unit: '片',
price: '2.80',
total: '39.20',
},
{
value: '8',
name: '蒙脱石散',
size: '3g/袋',
count: '12',
unit: '袋',
price: '4.50',
total: '54.00',
},
{
value: '9',
name: '头孢克肟胶囊',
size: '100mg/粒',
count: '6',
unit: '粒',
price: '8.00',
total: '48.00',
},
{
value: '10',
name: '氯雷他定片',
size: '10mg/片',
count: '12',
unit: '片',
price: '1.20',
total: '14.40',
},
{
value: '11',
name: '奥美拉唑肠溶胶囊',
size: '20mg/粒',
count: '14',
unit: '粒',
price: '2.50',
total: '35.00',
},
{
value: '12',
name: '甲硝唑片',
size: '200mg/片',
count: '20',
unit: '片',
price: '0.50',
total: '10.00',
},
{
value: '13',
name: '复方甘草片',
size: '0.3g/片',
count: '100',
unit: '片',
price: '0.10',
total: '10.00',
},
{
value: '14',
name: '维生素B族片',
size: '复合/片',
count: '60',
unit: '片',
price: '0.40',
total: '24.00',
},
{
value: '15',
name: '人工牛黄甲硝唑胶囊',
size: '0.3g/粒',
count: '24',
unit: '粒',
price: '1.80',
total: '43.20',
},
])
const columns = ref([
{
type: 'index',
width: '60',
label: '序号',
fixed: 'left',
},
{
prop: 'value',
label: 'id',
width: '60',
fixed: 'left',
showOverflowTooltip: true,
},
{
prop: 'name',
label: '药品名称',
width: '130',
showOverflowTooltip: true,
},
{
label: '规格',
prop: 'size',
width: '130',
},
{
label: '数量',
prop: 'count',
width: '90',
},
{
label: '单价(元)',
prop: 'price',
width: '100',
align: 'right',
},
{
label: '金额(元)',
prop: 'total',
align: 'right',
fixed: 'right',
},
])
const filterMethod = (value: string, row: any) => {
data1.value = options.value.filter((item) => item.name.includes(value))
}
</script>隐藏源代码
远程搜索时自动打开弹窗 1.2.2
远程搜索输入关键字时会自动打开弹窗；设置 remote-open-on-search 后，聚焦输入框时也会自动打开弹窗并展示加载、空状态或搜索结果。
输入药品名称
vue
<template>
<w-table-select
v-model="value"
clearable
filterable
remote
remote-open-on-search
reserve-keyword
placeholder="输入药品名称"
style="width: 240px"
:loading="loading"
:options="options"
:columns="columns"
:remote-method="remoteMethod"
:table-max-height="300"
:props="{
value: 'value',
label: 'name',
disabled: 'disabled',
}"
>
<template #loading>
<w-icon class="is-loading">
<Loading />
</w-icon>
</template>
</w-table-select>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Loading } from '@win-design-next/icons-vue'
type Row = {
value: string
name: string
size: string
price: string
}
const value = ref()
const loading = ref(false)
const options = ref<Row[]>([])
const source = ref<Row[]>([
{
value: '1',
name: '氯化钠注射液',
size: '100ml/袋',
price: '6.00',
},
{
value: '2',
name: '葡萄糖注射液',
size: '250ml/瓶',
price: '12.00',
},
{
value: '3',
name: '布洛芬缓释胶囊',
size: '300mg/粒',
price: '5.00',
},
{
value: '4',
name: '阿莫西林胶囊',
size: '250mg/粒',
price: '3.50',
},
])
const columns = ref([
{
prop: 'name',
label: '药品名称',
width: '160',
},
{
prop: 'size',
label: '规格',
width: '120',
},
{
prop: 'price',
label: '单价(元)',
align: 'right',
},
])
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
setTimeout(() => {
loading.value = false
options.value = source.value.filter((item) =>
item.name.toLowerCase().includes(query.toLowerCase())
)
}, 600)
} else {
options.value = []
}
}
</script>隐藏源代码
Select API
Attributes
| 参数 | 说明 | 类型 | 默认值 | Version |
|---|---|---|---|---|
| options | 选项的数据源 value and label and disabled 可以通过 props自定义 | array | — | |
| columns | 列配置项 | Array | — | |
| table-size | Table 的尺寸 | enum | default | |
| table-width | table 宽度 | Number/String | 500 | |
| table-max-height | table 高度 | Number/String | 300 | |
| model-value / v-model | 选中项绑定值 | string / number / boolean / object / array | — | |
| multiple | 是否多选 | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| size | 输入框尺寸 | enum | — | |
| clearable | 是否可以清空选项 | boolean | false | |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | false | |
| collapse-tags-tooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true | boolean | true | |
| multiple-limit | multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制 | number | 0 | |
| name | Select 输入框的原生 name 属性 | string | — | |
| effect | tooltip 主题，内置了 dark / light 两种 | enum / string | lighter | |
| autocomplete | Select 输入框的原生 autocomplete 属性 | string | off | |
| placeholder | 占位符，默认为“Select” | string | — | |
| filterable | Select 组件是否可筛选 | boolean | false | |
| filter-method | 自定义筛选方法 | Function | — | |
| remote | 其中的选项是否从服务器远程加载 | boolean | false | |
| remote-open-on-search | 远程搜索聚焦输入框时是否自动打开下拉弹窗 | boolean | false | 1.2.2 |
| remote-method | 自定义远程搜索方法 | Function | — | |
| loading | 是否正在从远程获取数据 | boolean | false | |
| loading-text | 从服务器加载数据时显示的文本，默认为“Loading” | string | — | |
| no-match-text | 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” | string | — | |
| no-data-text | 无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “暂无数据” | string | — | |
| popper-class | 选择器下拉菜单的自定义类名 | string | '' | |
| popper-style | 为 Select 下拉菜单和标签提示设置自定义样式 | string / object | — | |
| reserve-keyword | 当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词 | boolean | true | |
| default-first-option | 是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用 | boolean | false | |
| teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | boolean | true | |
| append-to | 下拉框挂载到哪个 DOM 元素 | string | — | |
| persistent | 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 | boolean | true | |
| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | false | |
| clear-icon | 自定义清除图标 | string / object | CircleCloseFilled | |
| fit-input-width | 下拉框的宽度是否与输入框相同 | boolean | false | |
| suffix-icon | 自定义后缀图标组件 | string / object | ||
| suffix-icon-rotate | 自定义后缀图标组件是否旋转 | boolean | true | |
| tag-type | 标签类型 | enum | info | |
| tag-effect | 标签效果 | enum | light | |
| validate-event | 是否触发表单验证 | boolean | true | |
| offset | 下拉面板偏移量 | number | 12 | |
| show-arrow | 下拉菜单的内容是否有箭头 | boolean | false | |
| placement | 下拉框出现的位置 | enum | bottom-start | |
| fallback-placements | dropdown 可用的 positions 请查看popper.js 文档 | array | ['bottom-start', 'top-start', 'right', 'left'] | |
| max-collapse-tags | 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 | number | 1 | |
| aria-label a11y | 等价于原生 input aria-label 属性 | string | — | |
| empty-values | 组件的空值配置 参考 config-provider | array | — | |
| value-on-clear | 清空选项的值 参考 config-provider | string / number / boolean / Function | — | |
| tabindex | input 的 tabindex | string / number | — | |
| plain | 朴素的 Select | boolean | false | V0.0.8 |
| props | 配置 options | object | — | |
| debounce | 远程搜索时的防抖延迟（以毫秒为单位） | number | 300 |
props
| Attribute | Description | Type | Default |
|---|---|---|---|
| value | 指定选项的值为选项对象的某个属性值 | string | value |
| label | 指定节点标签为节点对象的某个属性值 | string | label |
| disabled | 指定选项的禁用为选项对象的某个属性值 | string | disabled |
Events
| 事件名 | 说明 | Type |
|---|---|---|
| change | 选中值发生变化时触发 | Function |
| visible-change | 下拉框出现/隐藏时触发 | Function |
| remove-tag | 多选模式下移除 tag 时触发 | Function |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | Function |
| blur | 当 input 失去焦点时触发 | Function |
| focus | 当 input 获得焦点时触发 | Function |
| header-dragend 1.1.15 | 当拖动表头改变了列的宽度的时候会触发该事件 | Function |
Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| header | 下拉列表顶部的内容 | — |
| footer | 下拉列表底部的内容 | — |
| prefix | Select 组件头部内容 | — |
| empty | 无选项时的列表 | — |
| tag | select 组件自定义标签内容 | — |
| loading | select 组件自定义 loading 内容 | — |
| label | select 组件自定义标签内容 | — |
Exposes
| 插槽名 | 说明 | 类型 |
|---|---|---|
| focus | 使选择器的输入框获取焦点 | Function |
| blur | 使选择器的输入框失去焦点，并隐藏下拉框 | Function |
| selectedLabel | 获取当前选中的标签 | object |
Copyright 2025 Winning Health 版权所有