mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [select & select-v2] add label slot (#16960)

Browse Source
This commit is contained in:
kooriookami 2024-05-28 14:50:22 +08:00 committed by GitHub
parent 52cf9886bd
commit 1148ccd2d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 183 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/en-US/component/select-v2.md
View File

@ -209,6 +209,16 @@ select-v2/empty-values
:::
## Custom Label ^(2.7.4)
You can customize label.
:::demo
select-v2/custom-label
:::
## API
### Attributes
@ -290,6 +300,7 @@ select-v2/empty-values
| prefix | prefix content of input |
| tag ^(2.5.0) | content as Select tag |
| loading ^(2.5.2) | content as Select loading |
| label ^(2.7.4) | content as Select label |
### Exposes

11
docs/en-US/component/select.md
View File

@ -177,6 +177,16 @@ select/empty-values
:::
## Custom Label ^(2.7.4)
You can customize label.
:::demo
select/custom-label
:::
## Select API
### Select Attributes
@ -254,6 +264,7 @@ select/empty-values
| empty | content when there is no options | — |
| tag ^(2.5.0) | content as Select tag | — |
| loading ^(2.5.2) | content as Select loading | — |
| label ^(2.7.4) | content as Select label | — |
### Select Exposes

44
docs/examples/select-v2/custom-label.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="flex flex-wrap gap-4 items-center">
<el-select-v2
v-model="value1"
:options="options"
placeholder="Select"
style="width: 240px"
clearable
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
</el-select-v2>
<el-select-v2
v-model="value2"
:options="options"
placeholder="Select"
style="width: 240px"
clearable
multiple
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
</el-select-v2>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const value1 = ref<string>('Option 1')
const value2 = ref<string[]>(['Option 1'])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
value: `Option ${idx + 1}`,
label: `${initials[idx % 10]}${idx}`,
}))
</script>
<style scoped></style>

71
docs/examples/select/custom-label.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div class="flex flex-wrap gap-4 items-center">
<el-select
v-model="value1"
placeholder="Select"
style="width: 240px"
clearable
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="value2"
placeholder="Select"
style="width: 240px"
clearable
multiple
>
<template #label="{ label, value }">
<span>{{ label }}: </span>
<span style="font-weight: bold">{{ value }}</span>
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref<string>('Option1')
const value2 = ref<string[]>(['Option1'])
const options = [
{
value: 'Option1',
label: 'Label1',
},
{
value: 'Option2',
label: 'Label2',
},
{
value: 'Option3',
label: 'Label3',
},
{
value: 'Option4',
label: 'Label4',
},
{
value: 'Option5',
label: 'Label5',
},
]
</script>
<style scoped></style>

26
packages/components/select-v2/src/select.vue
View File

@ -68,7 +68,13 @@
@close="deleteTag($event, item)"
>
<span :class="nsSelect.e('tags-text')">
{{ getLabel(item) }}
<slot
name="label"
:label="getLabel(item)"
:value="getValue(item)"
>
{{ getLabel(item) }}
</slot>
</span>
</el-tag>
</div>
@ -116,7 +122,13 @@
@close="deleteTag($event, selected)"
>
<span :class="nsSelect.e('tags-text')">
{{ getLabel(selected) }}
<slot
name="label"
:label="getLabel(selected)"
:value="getValue(selected)"
>
{{ getLabel(selected) }}
</slot>
</span>
</el-tag>
</div>
@ -182,7 +194,15 @@
),
]"
>
<span>{{ currentPlaceholder }}</span>
<slot
v-if="hasModelValue"
name="label"
:label="currentPlaceholder"
:value="modelValue"
>
<span>{{ currentPlaceholder }}</span>
</slot>
<span v-else>{{ currentPlaceholder }}</span>
</div>
</div>
<div ref="suffixRef" :class="nsSelect.e('suffix')">

26
packages/components/select/src/select.vue
View File

@ -68,7 +68,13 @@
@close="deleteTag($event, item)"
>
<span :class="nsSelect.e('tags-text')">
{{ item.currentLabel }}
<slot
name="label"
:label="item.currentLabel"
:value="item.value"
>
{{ item.currentLabel }}
</slot>
</span>
</el-tag>
</div>
@ -116,7 +122,13 @@
@close="deleteTag($event, item)"
>
<span :class="nsSelect.e('tags-text')">
{{ item.currentLabel }}
<slot
name="label"
:label="item.currentLabel"
:value="item.value"
>
{{ item.currentLabel }}
</slot>
</span>
</el-tag>
</div>
@ -182,7 +194,15 @@
),
]"
>
<span>{{ currentPlaceholder }}</span>
<slot
v-if="hasModelValue"
name="label"
:label="currentPlaceholder"
:value="modelValue"
>
<span>{{ currentPlaceholder }}</span>
</slot>
<span v-else>{{ currentPlaceholder }}</span>
</div>
</div>
<div ref="suffixRef" :class="nsSelect.e('suffix')">