From 1148ccd2d6b0ba213db06dbc00224d24fdc4ebf2 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 28 May 2024 14:50:22 +0800
Subject: [PATCH] feat(components): [select & select-v2] add label slot
 (#16960)

---
 docs/en-US/component/select-v2.md            | 11 +++
 docs/en-US/component/select.md               | 11 +++
 docs/examples/select-v2/custom-label.vue     | 44 ++++++++++++
 docs/examples/select/custom-label.vue        | 71 ++++++++++++++++++++
 packages/components/select-v2/src/select.vue | 26 ++++++-
 packages/components/select/src/select.vue    | 26 ++++++-
 6 files changed, 183 insertions(+), 6 deletions(-)
 create mode 100644 docs/examples/select-v2/custom-label.vue
 create mode 100644 docs/examples/select/custom-label.vue

diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 383520029a..4b842151c8 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -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
 
diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index f4c413e766..7554c714d5 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -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
 
diff --git a/docs/examples/select-v2/custom-label.vue b/docs/examples/select-v2/custom-label.vue
new file mode 100644
index 0000000000..9aa3ab83c5
--- /dev/null
+++ b/docs/examples/select-v2/custom-label.vue
@@ -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>
diff --git a/docs/examples/select/custom-label.vue b/docs/examples/select/custom-label.vue
new file mode 100644
index 0000000000..ed367c3afb
--- /dev/null
+++ b/docs/examples/select/custom-label.vue
@@ -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>
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index 9d025b69d2..079a5fb8a2 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -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')">
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index c3f4cfcad8..6313ef2608 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -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')">