From 1854891bce8ae0d7cd5ab012dcc726fe03a20630 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Wed, 31 Aug 2022 16:46:01 +0800
Subject: [PATCH] docs: [select-v2] add demo of how to use value-key (#7175)

* docs: [el-select] add demo of how to use value-key

* docs: [selectV2] add demo of how to use value-key

* Update use-valueKey.vue

Co-authored-by: RealityBoy <1923740402@qq.com>
---
 docs/en-US/component/select-v2.md        |  8 +++++++
 docs/examples/select-v2/use-valueKey.vue | 28 ++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 docs/examples/select-v2/use-valueKey.vue

diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 1f42de8197..2c44511605 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -125,6 +125,14 @@ select-v2/remote-search
 
 :::
 
+## use value-key
+
+:::demo when `options.value` is an object, you should set a unique identity key name for value
+
+select-v2/use-valueKey
+
+:::
+
 ## SelectV2 Attributes
 
 | Attribute                         | Description                                                                                                                              | Type                               | Accepted Values     | Default       |
diff --git a/docs/examples/select-v2/use-valueKey.vue b/docs/examples/select-v2/use-valueKey.vue
new file mode 100644
index 0000000000..41adc983e4
--- /dev/null
+++ b/docs/examples/select-v2/use-valueKey.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-select-v2
+    v-model="value"
+    :options="options"
+    placeholder="Please select"
+    value-key="value.name"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
+
+const value = ref('')
+const options = Array.from({ length: 1000 }).map((_, idx) => ({
+  value: {
+    name: `Option ${idx + 1}`,
+    test: `test ${idx % 3}`,
+  },
+  label: `${initials[idx % 10]}${idx}`,
+}))
+</script>
+
+<style scoped>
+.example-showcase .el-select-v2 {
+  margin-right: 20px;
+}
+</style>