docs(components): [select] create example using value-key attribute (#…

…12698)

* docs(components): [select] create example using 'value-key' attribute

Example using option type with same value of 'label' property

- Use 'id' property of option as value of 'value-key' attribute

* docs(docs): apply 'value-key' example to 'select.md'

Remove the existing 'tip' and add it to the description

---------

Co-authored-by: FE_강명구 <mg_@ex-em.com>

docs/en-US/component/select.md

@@ -109,10 +109,14 @@ select/allow-create
 
 :::
 
-:::tip
+## Use value-key attribute
 
 If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
 
+:::demo By using the `value-key` attribute, data with duplicate labels can be properly handled. The value of the `label` property is duplicated, but the option can be identified through the `id`.
+
+select/value-key
+
 :::
 
 ## Select Attributes

docs/examples/select/value-key.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="m-4">
+    <el-select v-model="value" value-key="id" placeholder="Select">
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.label"
+        :value="item"
+      />
+    </el-select>
+    <p>
+      selected option's description:
+      {{ value ? value.desc : 'no select' }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Option = {
+  id: number
+  label: string
+  desc: string
+}
+const value = ref<Option>()
+const options = ref([
+  { id: 1, label: 'Option A', desc: 'Option A - 230506' },
+  { id: 2, label: 'Option B', desc: 'Option B - 230506' },
+  { id: 3, label: 'Option C', desc: 'Option C - 230506' },
+  { id: 4, label: 'Option A', desc: 'Option A - 230507' },
+])
+</script>