From db664b033b046178fd967b3d3f33d0989e5a0256 Mon Sep 17 00:00:00 2001
From: mg5566 <mg5566@hanmail.net>
Date: Sun, 7 May 2023 09:59:09 +0900
Subject: [PATCH] docs(components): [select] create example using value-key
 attribute (#12698)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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     |  6 +++++-
 docs/examples/select/value-key.vue | 33 ++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/select/value-key.vue

diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 84cb194b98..cd72515ec7 100644
--- a/docs/en-US/component/select.md
+++ b/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
diff --git a/docs/examples/select/value-key.vue b/docs/examples/select/value-key.vue
new file mode 100644
index 0000000000..db69bd7b7e
--- /dev/null
+++ b/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>