From a4d6fe2cb435e728844300fff0c879e0ecd3eaba Mon Sep 17 00:00:00 2001
From: Rainbow <1256734885@qq.com>
Date: Sat, 13 Sep 2025 07:53:04 +0800
Subject: [PATCH] docs(components): [mention] add an example of using props
 (#22139)

---
 docs/en-US/component/mention.md | 10 +++++++++
 docs/examples/mention/props.vue | 36 +++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 docs/examples/mention/props.vue

diff --git a/docs/en-US/component/mention.md b/docs/en-US/component/mention.md
index b36f22795f..ae6d596138 100644
--- a/docs/en-US/component/mention.md
+++ b/docs/en-US/component/mention.md
@@ -17,6 +17,16 @@ mention/basic
 
 :::
 
+## Props ^(2.11.3)
+
+You can customize the alias of the `options` through the `props` attribute.
+
+:::demo
+
+mention/props
+
+:::
+
 ## Textarea
 
 The input type can be set to `textarea`.
diff --git a/docs/examples/mention/props.vue b/docs/examples/mention/props.vue
new file mode 100644
index 0000000000..ef84482e38
--- /dev/null
+++ b/docs/examples/mention/props.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-mention
+    v-model="value"
+    :options="options"
+    :props="props"
+    style="width: 320px"
+    placeholder="Please input"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('@')
+const props = { label: 'name', value: 'id', disabled: 'unable' }
+const options = ref([
+  {
+    name: 'Fuphoenixes',
+    id: 'Fuphoenixes',
+    unable: true,
+  },
+  {
+    name: 'kooriookami',
+    id: 'kooriookami',
+  },
+  {
+    name: 'Jeremy',
+    id: 'Jeremy',
+    unable: true,
+  },
+  {
+    name: 'btea',
+    id: 'btea',
+  },
+])
+</script>