From c3aeaf93a50253d22793de3edc8510d7f945304b Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 4 Sep 2025 21:32:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E4=BD=BF=E7=94=A8com?=
 =?UTF-8?q?puted=E8=BF=87=E6=BB=A4=E5=AD=97=E5=85=B8=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E7=9A=84demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/演示使用自行删除/dict/index.vue | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/apps/web-antd/src/views/演示使用自行删除/dict/index.vue b/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
index e0fa2792..b1a07654 100644
--- a/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { h, ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { CodeMirror, Page } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
@@ -32,6 +32,27 @@ onMounted(async () => {
   options.push(...resp);
 })
 `;
+
+const computedOptions = computed(() => {
+  return options.filter((item) => item.dictValue !== '1');
+});
+
+const filterCode = `
+{
+  component: 'Select',
+  componentProps: {
+    // 不生效的写法
+    // options: getDictOptions(DictEnum.SYS_COMMON_STATUS).filter((item) => item.value !== '0'),
+    // 正确写法
+    options: computed(() => {
+      const options = getDictOptions(DictEnum.SYS_COMMON_STATUS);
+      return options.filter((item) => item.value !== '0');
+    }),
+  },
+  fieldName: 'status',
+  label: '状态',
+},
+`;
 </script>
 
 <template>
@@ -113,5 +134,22 @@ onMounted(async () => {
         </DescriptionsItem>
       </Descriptions>
     </Card>
+
+    <Card size="small" title="给 Form 组件赋值前 需要处理字典后展示的情况">
+      <p class="mb-2 text-black/55">
+        <Select class="w-[200px]" :options="computedOptions" />
+
+        这里使用computed过滤了部分选项
+        <a
+          class="text-primary font-semibold"
+          target="_blank"
+          href="https://dapdap.top/function/dict.html#%E7%BB%99-form-%E7%BB%84%E4%BB%B6%E8%B5%8B%E5%80%BC%E5%89%8D-%E9%9C%80%E8%A6%81%E5%81%9A%E5%A4%84%E7%90%86%E5%AD%97%E5%85%B8%E5%90%8E%E5%B1%95%E7%A4%BA%E7%9A%84%E6%83%85%E5%86%B5"
+        >
+          相关文档
+        </a>
+      </p>
+      <p class="mb-2 text-red-500">简单描述就是套一层computed就行</p>
+      <CodeMirror readonly :model-value="filterCode" language="js" />
+    </Card>
   </Page>
 </template>