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

src/router/modules/demo.ts

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

src/views/demo/computedWithEnumList/index.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="p-5 space-y-5 !bg-gray-100">
+        <el-card
+            header="页面请求一个初始化数据，初始化数据中只返回了枚举值的key, 需要异步获取所有枚举列表（多个枚举值是接口返回，并且不知道具体返回时间），然后根据key获取对应的value再进行渲染"
+        >
+        </el-card>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            pageInfo: {},
+            enumList: [
+                {
+                    // 性别
+                    sexOptions: [],
+                    // 学历
+                    eduList: [],
+                    // 婚姻状况
+                    marriageList: [],
+                    // 身份证件类型
+                    idTypeList: [],
+                    // 职业
+                    jobList: [],
+                    // 民族
+                    nationList: [],
+                },
+            ],
+        };
+    },
+    created() {
+        this.getPageInfo();
+        this.getEnumList();
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>