feat: 接口返回数据需要根据多个枚举值动态计算结果渲染（多个枚举值是接口返回，并且不知道具体返回时间）

GEMINI.md

@@ -46,6 +46,7 @@ vue3-mgt-template/
 - **严格遵守规范**：当Gemini为本项目生成或修改任何代码时，**必须** 严格遵守本文件中定义的所有开发规范。
 - **中文优先**：所有代码注释、日志输出（例如 `console.log`）、以及提交信息（Commit Message）**必须** 使用中文。
 - **多平台兼容**：所有代码需要兼容mac,windows,linux平台。
+- **文档和注释**：该项目是一个个人学习记录项目，请尽可能多提供文档和注释。
 
 
 ### 代码风格
@@ -62,59 +63,10 @@ vue3-mgt-template/
 - 日志输出请使用中文
 
 ## 对话记录
-
-### 本次会话总结 (2025年10月14日)
-
-本次会话主要围绕 **首页动态化改造** 展开，完成了以下核心功能：
-
-1.  **创建页面统计脚本**:
-    *   在 `scripts/` 目录下创建了 `statistics.mjs` 脚本。
-    *   该脚本能够统计 `demo`, `python`, `utils`, `screen`, `template` 等多个模块下的页面数量、标题、最后修改日期等信息。
-    *   脚本能够智能处理动态路由（如 `demo` 模块）和静态路由（如 `template` 模块）两种不同定义方式。
-    *   在 `package.json` 中添加了 `pnpm run stats` 命令来执行此脚本。
-
-2.  **生成动态配置文件**:
-    *   脚本的统计结果会输出到 `/src/views/welcome/config.json` 文件中，作为首页的数据源。
-
-3.  **首页组件改造**:
-    *   重构了 `/src/views/welcome/index.vue` 组件。
-    *   移除了原有的静态模拟数据。
-    *   组件现在直接从 `config.json` 导入数据，实现了首页内容的动态更新。
-    *   在页面前端添加了分类的中文名映射，优化了展示效果。
-
-4.  **过程中的迭代与修复**:
-    *   根据用户反馈，修复了统计脚本中错误的过滤逻辑，确保了统计数据的准确性。
-    *   根据用户需求，多次优化了页面标题的生成规则。
-    *   根据用户反馈，为所有由Gemini生成的代码和日志添加了中文注释，并强化了此项规范。
-
-### 本次会话总结 (2025年10月14日)
-
-本次会话聚焦于解决 `scripts/statistics.mjs` 脚本在 Windows 平台上的兼容性问题。
-
-1.  **问题定位**:
-    *   用户报告在 Windows 系统上运行 `pnpm run stats` 命令无法生成正确的 `config.json` 文件，统计数据不完整。初步诊断为跨平台路径分隔符问题。
-
-2.  **修复过程**:
-    *   **初次尝试**: 修正了脚本中过滤 `components` 目录的逻辑，将硬编码的 `/` 改为跨平台兼容的判断方式。但测试后发现问题未完全解决。
-    *   **深入分析**: 进一步排查发现，问题根源在于 `globSync` 函数在 Windows 上接收了由 `path.join` 生成的包含 `\` 的路径模式，导致文件匹配失败。
-    *   **最终修复**: 根据 `glob` 库的最佳实践，修改了脚本，在调用 `globSync` 前强制将路径模式中的 `\` 替换为 `/`。
-
-3.  **结果验证**:
-    *   重新运行 `pnpm run stats` 命令，脚本成功执行，并生成了包含所有模块 (`demo`, `python`, `template` 等) 的完整统计数据。
-    *   `config.json` 文件内容恢复正常，证明了跨平台兼容性问题已解决。
-
-- **会话结束指令**：當我表示準備結束會話時，你**必須**先將本次對話的重點，以“本次会话总结”的格式更新到 `GEMINI.md` 的“对话记录”部分，然後才能結束對話。
+- **会话结束指令**：當我表示準備結束會話時，你**必須**先將本次對話的重點，以“本次会话总结”的格式更新到 `README.md` 的“对话记录”部分，然後才能結束對話。
 
 ## 开发任务
 ### 规范
 使用了删除线的就代表已执行完成
 
-### 任务列表
-* ~~项目首页/welcome这个路由下是默认的的首页介绍页面，但是现在这个页面是一个静态的页面，是由一些模拟数据渲染的，我现在希望完成功能如下：~~
-- ~~在package.json中添加一个命令，当执行这个命令的时候可以本地统计/src/views下的/demo，/python，/utils，/screen，这四个模块下分别有多少个页面，页面维度请按照router路由来统计，例如/python文件夹有五个文件夹，这就是5个页面。当统计完成后在/src/views/welcome中创建或者更新config.json文件，以便后续页面可以直接读取json配置文件~~
-
-- ~~请读取/src/view/welcome中页面，其中页面的数据来源为/scripts/statistics.mjs，请更新该脚本，以便获得更多的信息，来满足/src/view/welcome页面所需数据的渲染~~
-
-- ~~将/src/view/welcome/config.json作为数据源，渲染到/src/view/welcome的vue组件中~~
-
-* ~~本项目是一个个人的代码总结记录网站，在部署生成环境的时候（即执行pnpm build）的时候也是需要查看console日志的，现在请帮我打开生产环境的打印信息和日志。~~
+### 任务列表

README.md

@@ -1,4 +1,86 @@
 <h1>依赖vue-pure-admin精简版，自行适应的vue3后台管理系统</h1>
 
 ## 依赖项目文档
-[vue-pure-admin文档](https://pure-admin.cn/pages/introduction/#%E5%9C%A8%E7%BA%BF%E9%A2%84%E8%A7%88)
+[vue-pure-admin文档](https://pure-admin.cn/pages/introduction/#%E5%9C%A8%E7%BA%BF%E9%A2%84%E8%A7%88)
+
+## 对话记录
+
+### 本次会话总结 (2025年10月30日)
+
+本次会话完成了 `computedWithEnumList` 示例页面的开发任务，主要包含以下步骤：
+
+1.  **创建 Mock 接口**:
+    *   在 `mock/` 目录下新建了 `computedWithEnumList.ts` 文件。
+    *   在该文件中定义了两个接口：
+        *   `getPageInfo`: 用于获取分页表格数据，并模拟了 200-500ms 的随机延迟。
+        *   `getEnumList`: 用于根据类型获取枚举值列表（如性别、状态等），并模拟了 1-5s 的随机延迟，以测试异步场景。
+
+2.  **创建 Vue 组件**:
+    *   在 `src/views/demo/` 目录下创建了 `computedWithEnumList/index.vue` 页面组件。
+    *   该组件在挂载时会并行请求表格数据和多个枚举值列表。
+    *   使用计算属性（`computed`）将接口返回的原始枚举值（如 `1`, `2`）动态映射为对应的标签（如 `男`, `女`），解决了数据和枚举值返回时机不确定的问题。
+
+3.  **代码风格调整**:
+    *   初版组件使用了 Vue 3 的组合式 API（`setup` 语法糖）。
+    *   根据用户要求，将组件重构为选项式 API 风格，同时保持了原有的全部功能和模板结构，以符合项目现有代码规范。
+
+4.  **路由集成**:
+    *   利用项目中 `src/router/modules/demo.ts` 的动态路由生成机制，新创建的页面组件被自动集成到路由系统中，无需手动配置，可以通过 `/demo/computedWithEnumList` 路径直接访问。
+
+### 本次会话总结 (2025年10月14日)
+
+本次会话主要围绕 **首页动态化改造** 展开，完成了以下核心功能：
+
+1.  **创建页面统计脚本**:
+    *   在 `scripts/` 目录下创建了 `statistics.mjs` 脚本。
+    *   该脚本能够统计 `demo`, `python`, `utils`, `screen`, `template` 等多个模块下的页面数量、标题、最后修改日期等信息。
+    *   脚本能够智能处理动态路由（如 `demo` 模块）和静态路由（如 `template` 模块）两种不同定义方式。
+    *   在 `package.json` 中添加了 `pnpm run stats` 命令来执行此脚本。
+
+2.  **生成动态配置文件**:
+    *   脚本的统计结果会输出到 `/src/views/welcome/config.json` 文件中，作为首页的数据源。
+
+3.  **首页组件改造**:
+    *   重构了 `/src/views/welcome/index.vue` 组件。
+    *   移除了原有的静态模拟数据。
+    *   组件现在直接从 `config.json` 导入数据，实现了首页内容的动态更新。
+    *   在页面前端添加了分类的中文名映射，优化了展示效果。
+
+4.  **过程中的迭代与修复**:
+    *   根据用户反馈，修复了统计脚本中错误的过滤逻辑，确保了统计数据的准确性。
+    *   根据用户需求，多次优化了页面标题的生成规则。
+    *   根据用户反馈，为所有由Gemini生成的代码和日志添加了中文注释，并强化了此项规范。
+
+### 本次会话总结 (2025年10月14日)
+
+本次会话聚焦于解决 `scripts/statistics.mjs` 脚本在 Windows 平台上的兼容性问题。
+
+1.  **问题定位**:
+    *   用户报告在 Windows 系统上运行 `pnpm run stats` 命令无法生成正确的 `config.json` 文件，统计数据不完整。初步诊断为跨平台路径分隔符问题。
+
+2.  **修复过程**:
+    *   **初次尝试**: 修正了脚本中过滤 `components` 目录的逻辑，将硬编码的 `/` 改为跨平台兼容的判断方式。但测试后发现问题未完全解决。
+    *   **深入分析**: 进一步排查发现，问题根源在于 `globSync` 函数在 Windows 上接收了由 `path.join` 生成的包含 `\` 的路径模式，导致文件匹配失败。
+    *   **最终修复**: 根据 `glob` 库的最佳实践，修改了脚本，在调用 `globSync` 前强制将路径模式中的 `\` 替换为 `/`。
+
+3.  **结果验证**:
+    *   重新运行 `pnpm run stats` 命令，脚本成功执行，并生成了包含所有模块 (`demo`, `python`, `template` 等) 的完整统计数据。
+    *   `config.json` 文件内容恢复正常，证明了跨平台兼容性问题已解决。
+
+### 任务列表
+
+* 项目首页/welcome这个路由下是默认的的首页介绍页面，但是现在这个页面是一个静态的页面，是由一些模拟数据渲染的，我现在希望完成功能如下：
+- 在package.json中添加一个命令，当执行这个命令的时候可以本地统计/src/views下的/demo，/python，/utils，/screen，这四个模块下分别有多少个页面，页面维度请按照router路由来统计，例如/python文件夹有五个文件夹，这就是5个页面。当统计完成后在/src/views/welcome中创建或者更新config.json文件，以便后续页面可以直接读取json配置文件
+- 请读取/src/view/welcome中页面，其中页面的数据来源为/scripts/statistics.mjs，请更新该脚本，以便获得更多的信息，来满足/src/view/welcome页面所需数据的渲染
+- 将/src/view/welcome/config.json作为数据源，渲染到/src/view/welcome的vue组件中
+
+
+* 本项目是一个个人的代码总结记录网站，在部署生成环境的时候（即执行pnpm build）的时候也是需要查看console日志的，现在请帮我打开生产环境的打印信息和日志.
+
+
+* ~~请关注以下两个文件夹
+- /src/views/demo/computedWithEnumList
+- /mock (mock接口，返回computedWithEnumList组件内所需接口getPageInfo, getEnumList, getEnumList是一个通用接口，每次根据传入的类型返回对应的枚举值，比如传入性别， 只返回性别的枚举值，因此getEnumList需要循环多次执行获取所有枚举列表)
+**要求**：
+- computedWithEnumList组件内需要的接口，在mock内新建文件创建接口
+- mock接口需要模拟延迟返回， getPageInfo随机200~500ms，getEnumList接口随机1～5s~~

mock/computedWithEnumList.ts

@@ -0,0 +1,75 @@
+
+// 模拟获取computedWithEnumList页面所需接口
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+import { faker } from '@faker-js/faker';
+
+// 模拟后端延迟返回
+const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+// 模拟枚举值
+const enums = {
+    // 性别
+    gender: [
+        { label: '男', value: 1 },
+        { label: '女', value: 2 },
+        { label: '未知', value: 0 },
+    ],
+    // 状态
+    status: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+    ],
+    // 角色
+    role: [
+        { label: '管理员', value: 'admin' },
+        { label: '普通用户', value: 'common' },
+    ],
+};
+
+export default defineFakeRoute([
+    {
+        url: '/computed-with-enum-list/get-page-info',
+        method: 'post',
+        response: async ({ body }) => {
+            // 模拟延迟
+            await delay(faker.number.int({ min: 200, max: 500 }));
+
+            const list = [];
+            for (let i = 0; i < body.pageSize; i++) {
+                list.push({
+                    id: faker.string.uuid(),
+                    name: faker.person.fullName(),
+                    gender: faker.helpers.arrayElement([0, 1, 2]),
+                    status: faker.helpers.arrayElement([0, 1]),
+                    role: faker.helpers.arrayElement(['admin', 'common']),
+                    createTime: faker.date.past(),
+                });
+            }
+
+            return {
+                success: true,
+                code: 200,
+                data: {
+                    list,
+                    total: 100,
+                    pageSize: body.pageSize,
+                    pageNumber: body.pageNumber,
+                },
+            };
+        },
+    },
+    {
+        url: '/computed-with-enum-list/get-enum-list',
+        method: 'get',
+        response: async ({ query }) => {
+            // 模拟超长延迟
+            await delay(faker.number.int({ min: 1000, max: 5000 }));
+            const type = query.type as keyof typeof enums;
+            return {
+                success: true,
+                code: 200,
+                data: enums[type] || [],
+            };
+        },
+    },
+]);

src/router/modules/demo.ts

@@ -142,6 +142,18 @@ const titleArr = [
         key: 'resizeElementDialog',
         title: '动态调整element弹窗大小',
     },
+    {
+        key: 'computedRules',
+        title: 'ElementUI的form组件使用rules时动态计算并传入组件实例',
+    },
+    {
+        key: 'computedWithEnumList(AI)',
+        title: '接口返回数据需要根据多个枚举值动态计算结果渲染（多个枚举值是接口返回，并且不知道具体返回时间）',
+    },
+    {
+        key: 'computedWithEnumList',
+        title: '接口返回数据需要根据多个枚举值动态计算结果渲染（多个枚举值是接口返回，并且不知道具体返回时间）',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/computedRules/config.js

@@ -0,0 +1,57 @@
+export const checkIdNumber = (context) => {
+    const { form } = context;
+    return (rule, value, callback) => {
+        if (!form.idType) {
+            return callback(new Error('请选择证件类型'));
+        }
+        if (form.idType === '身份证') {
+            if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|21|22|23|24|25|26|27|28)\d{3}[0-9Xx]$/i.test(value)) {
+                callback(new Error('身份证格式不正确'));
+            }
+        } else if (form.idType === '护照') {
+            if (!/^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|21|22|23|24|25|26|27|28)\d{3}[0-9Xx]$/i.test(value)) {
+                callback(new Error('护照格式不正确'));
+            }
+        }
+    };
+};
+
+export const getRules = (context) => {
+    console.log(context, '传递过来的context内容');
+    return {
+        name: [
+            {
+                required: true,
+                message: '请输入名称',
+                trigger: 'blur',
+            },
+        ],
+        age: [
+            {
+                required: true,
+                message: '请输入年龄',
+                trigger: 'blur',
+            },
+        ],
+        idType: [
+            {
+                required: true,
+                message: '请选择证件类型',
+                trigger: 'change',
+            },
+        ],
+        // 这里演示证件号码校验，必须依赖证件类型的值，比如证件类型是身份证，校验一种格式，是护照，校验另一种格式，等等
+        idNumber: [
+            {
+                required: true,
+                message: '请输入证件号码',
+                trigger: 'blur',
+            },
+            {
+                required: true,
+                validator: checkIdNumber(context),
+                trigger: 'blur',
+            },
+        ],
+    };
+};

src/views/demo/computedRules/index.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card header="ElementUI的form组件使用rules时动态计算并传入组件实例">
+            <!-- validate-on-rule-change需要设置为false，否则会导致表单每次页面加载后都会直接触发表单校验 -->
+            <el-form
+                ref="formRef"
+                :rules="rules"
+                :model="form"
+                label-width="120px"
+                :validate-on-rule-change="false"
+            >
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="姓名"
+                            prop="name"
+                        >
+                            <el-input
+                                placeholder="请输入姓名"
+                                v-model="form.name"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="年龄"
+                            prop="age"
+                        >
+                            <el-input
+                                placeholder="请输入年龄"
+                                v-model="form.age"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="证件类型"
+                            prop="idType"
+                        >
+                            <el-select
+                                v-model="form.idType"
+                                placeholder="请选择"
+                                clearable
+                            >
+                                <el-option
+                                    label="身份证"
+                                    value="身份证"
+                                ></el-option>
+                                <el-option
+                                    label="护照"
+                                    value="护照"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item
+                            label="证件号码"
+                            prop="idNumber"
+                        >
+                            <el-input
+                                placeholder="请输入证件号码"
+                                v-model="form.idNumber"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-button
+                    type="primary"
+                    @click="submitForm"
+                    >提交</el-button
+                >
+            </el-form>
+        </el-card>
+    </div>
+</template>
+
+<!-- setup写法，不会传递this，但是可以传递任何你想传递的参数，比如表单实例等 -->
+<!-- <script setup>
+import { ref, computed } from 'vue';
+import { getRules } from './config.js';
+cpnst formRef = ref(null);
+const form = ref({
+    username: '',
+    password: '',
+    gender: '',
+    hobbies: [],
+    city: '',
+    birthday: '',
+    desc: '',
+});
+
+const rules = computed(() => {
+    return getRules(form.value);
+});
+</script> -->
+
+<!-- options写法，可以传递this，同样可以传递任何你想传递的参数 -->
+<script>
+import { getRules } from './config.js';
+
+export default {
+    data() {
+        return {
+            form: {
+                username: '',
+                password: '',
+                gender: '',
+                hobbies: [],
+                city: '',
+                birthday: '',
+                desc: '',
+            },
+        };
+    },
+    computed: {
+        rules() {
+            // 这里就将整个this传递过去了
+            return getRules(this);
+        },
+    },
+    methods: {
+        submitForm() {
+            this.$refs.formRef.validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/computedWithEnumList(AI)/index.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import axios from 'axios';
+
+export default defineComponent({
+    name: 'ComputedWithEnumList',
+    data() {
+        return {
+            // 定义加载状态
+            loading: false,
+            // 表格数据
+            tableData: [],
+            // 分页信息
+            pagination: {
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0,
+            },
+            // 枚举值
+            enums: {
+                gender: [],
+                status: [],
+                role: [],
+            },
+        };
+    },
+    computed: {
+        // 计算属性，用于将枚举值映射到标签
+        enumMap() {
+            const map = {
+                gender: {},
+                status: {},
+                role: {},
+            };
+            for (const key in this.enums) {
+                this.enums[key].forEach((item) => {
+                    map[key][item.value] = item.label;
+                });
+            }
+            return map;
+        },
+    },
+    methods: {
+        // 获取表格数据
+        async getPageInfo() {
+            try {
+                const res = await axios.post('/computed-with-enum-list/get-page-info', {
+                    pageNumber: this.pagination.pageNumber,
+                    pageSize: this.pagination.pageSize,
+                });
+                if (res.data.success) {
+                    this.tableData = res.data.data.list;
+                    this.pagination.total = res.data.data.total;
+                }
+            } catch (error) {
+                console.error('获取表格数据失败:', error);
+            }
+        },
+        // 获取枚举值
+        async getEnumList(type: string) {
+            try {
+                const res = await axios.get('/computed-with-enum-list/get-enum-list', { params: { type } });
+                if (res.data.success) {
+                    this.enums[type] = res.data.data;
+                }
+            } catch (error) {
+                console.error(`获取枚举值(${type})失败:`, error);
+            }
+        },
+        // 格式化表格单元格
+        formatGender(row) {
+            return this.enumMap.gender[row.gender] || row.gender;
+        },
+        formatStatus(row) {
+            return this.enumMap.status[row.status] || row.status;
+        },
+        formatRole(row) {
+            return this.enumMap.role[row.role] || row.role;
+        },
+    },
+    async mounted() {
+        this.loading = true;
+        await Promise.all([this.getPageInfo(), this.getEnumList('gender'), this.getEnumList('status'), this.getEnumList('role')]);
+        this.loading = false;
+    },
+});
+</script>
+
+<template>
+    <div class="p-4">
+        <el-card>
+            <template #header>
+                <div class="card-header">
+                    <span>计算属性与枚举值列表(AI实现，使用table的formatter属性，确实更优雅，但是有局限性)</span>
+                </div>
+            </template>
+            <el-table
+                :data="tableData"
+                v-loading="loading"
+                border
+                stripe
+            >
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                />
+                <el-table-column
+                    prop="gender"
+                    label="性别"
+                    :formatter="formatGender"
+                />
+                <el-table-column
+                    prop="status"
+                    label="状态"
+                    :formatter="formatStatus"
+                />
+                <el-table-column
+                    prop="role"
+                    label="角色"
+                    :formatter="formatRole"
+                />
+                <el-table-column
+                    prop="createTime"
+                    label="创建时间"
+                />
+            </el-table>
+        </el-card>
+    </div>
+</template>

src/views/demo/computedWithEnumList/index.vue

@@ -0,0 +1,130 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import axios from 'axios';
+
+export default defineComponent({
+    name: 'ComputedWithEnumList',
+    data() {
+        return {
+            // 定义加载状态
+            loading: false,
+            // 表格数据
+            tableData: [],
+            // 表哥列
+            tableColumns: [
+                { prop: 'name', label: '姓名' },
+                { prop: 'gender', label: '性别' },
+                { prop: 'status', label: '状态' },
+                { prop: 'role', label: '角色' },
+                { prop: 'createTime', label: '创建时间' },
+            ],
+            // 分页信息
+            pagination: {
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0,
+            },
+            // 枚举值
+            enums: {
+                gender: [],
+                status: [],
+                role: [],
+            },
+        };
+    },
+    computed: {
+        // 计算属性，用于将枚举值映射到标签
+        enumMap() {
+            const map = {
+                gender: {},
+                status: {},
+                role: {},
+            };
+            for (const key in this.enums) {
+                this.enums[key].forEach((item) => {
+                    map[key][item.value] = item.label;
+                });
+            }
+            return map;
+        },
+        cptTableData() {
+            return this.tableData.map((item) => {
+                return {
+                    ...item,
+                    gender: this.formatGender(item),
+                    status: this.formatStatus(item),
+                    role: this.formatRole(item),
+                };
+            });
+        },
+    },
+    methods: {
+        // 获取表格数据
+        async getPageInfo() {
+            try {
+                const res = await axios.post('/computed-with-enum-list/get-page-info', {
+                    pageNumber: this.pagination.pageNumber,
+                    pageSize: this.pagination.pageSize,
+                });
+                if (res.data.success) {
+                    this.tableData = res.data.data.list;
+                    this.pagination.total = res.data.data.total;
+                }
+            } catch (error) {
+                console.error('获取表格数据失败:', error);
+            }
+        },
+        // 获取枚举值
+        async getEnumList(type: string) {
+            try {
+                const res = await axios.get('/computed-with-enum-list/get-enum-list', { params: { type } });
+                if (res.data.success) {
+                    this.enums[type] = res.data.data;
+                }
+            } catch (error) {
+                console.error(`获取枚举值(${type})失败:`, error);
+            }
+        },
+        // 格式化表格单元格
+        formatGender(row) {
+            return this.enumMap.gender[row.gender] || row.gender;
+        },
+        formatStatus(row) {
+            return this.enumMap.status[row.status] || row.status;
+        },
+        formatRole(row) {
+            return this.enumMap.role[row.role] || row.role;
+        },
+    },
+    async mounted() {
+        this.loading = true;
+        await Promise.all([this.getPageInfo(), this.getEnumList('gender'), this.getEnumList('status'), this.getEnumList('role')]);
+        this.loading = false;
+    },
+});
+</script>
+
+<template>
+    <div class="p-4">
+        <el-card>
+            <template #header>
+                <div class="card-header">
+                    <span>计算属性与枚举值列表(自己实现，不使用table的formatter属性)</span>
+                </div>
+            </template>
+            <el-table
+                :data="cptTableData"
+                v-loading="loading"
+                border
+                stripe
+            >
+                <el-table-column
+                    v-for="column in tableColumns"
+                    :key="column.prop"
+                    :prop="column.prop"
+                    :label="column.label"
+                />
+            </el-table>
+        </el-card>
+    </div>
+</template>