学习啦！
对象映射是一种将一个对象的属性名映射到另一个对象的属性名的方法。
const keyMapping = {username: '用户名', gender: { label: '性别', mapping: gender }, // `gender` 映射为 `性别`email: '邮箱', // `email` 映射为 `邮箱`phone: '电话', // `phone` 映射为 `电话`address: '地址', // `address` 映射为 `地址`status: { label: '状态', mapping: userStatus }, // `status` 映射为 `状态` };枚举类型枚举类型通常用对象表示，其中键是内部值，值是显示值。方便进行双向映射。
const Color = {RED: '红色',GREEN: '绿色',BLUE: '蓝色' };双向映射：允许从正向或者反向两个方向进行查找和转换。
正向映射：从内部值到显示值的映射。
function getDisplayName(color) {return Color[color] || '未知颜色'; }console.log(getDisplayName('RED')); // 输出: 红色 console.log(getDisplayName('UNKNOWN')); // 输出: 未知颜色反向映射：从显示值到内部值的映射。
const ColorReverse = Object.fromEntries(Object.entries(Color).map(([key, value]) => [value, key]) );function getInternalName(displayName) {return ColorReverse[displayName] || 'UNKNOWN'; }console.log(getInternalName('红色')); // 输出: RED console.log(getInternalName('未知颜色')); // 输出: UNKNOWN
效果：
综合应用：
<template><div class="userInfo"><div class="userInfo-list"><div style="display: flex;align-items: center;justify-content: start;" v-for="item in userInfoSource":key="item.label"><h1>{{ item.label }}：</h1><h1>{{ item.value }}</h1></div></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
const gender = {0: '男',1: '女',2: '其他',
};
const userStatus = {0: '冻结',1: '正常',2: '删除',
};
// 1. 初始化 `userInfoSource`，包含 label 和空值
const userInfoSource = ref([{ label: '用户名', value: '' },{ label: '性别', value: '-' },{ label: '邮箱', value: '-' },{ label: '电话', value: '-' },{ label: '地址', value: '-' },{ label: '状态', value: '-' },
]);// 2. `keyMapping` 对象用于映射 userInfo 中的字段名
const keyMapping = {username: '用户名', // `username` 映射为 `用户名`gender: { label: '性别', mapping: gender }, // `gender` 映射为 `性别`email: '邮箱', // `email` 映射为 `邮箱`phone: '电话', // `phone` 映射为 `电话`address: '地址', // `address` 映射为 `地址`status: { label: '状态', mapping: userStatus }, // `status` 映射为 `状态`
};// 3. 模拟的用户信息数据
const userInfo = ref([{ id: 1, username: 'Alice', gender: 0, age: 25, email: 'alice@example.com', phone: '1234567890', address: '123 Street', status: 1 },{ id: 2, username: 'Bob', gender: 1, age: 30, email: 'bob@example.com', phone: '9876543210', address: '456 Avenue', status: 0 },
]);// 4. 更新 `userInfoSource` 的函数，匹配 `keyMapping` 映射关系
const updateUserInfo = () => {if (Array.isArray(userInfo.value) && userInfo.value.length > 0) {const firstUser = userInfo.value[0]; // 假设只取第一个用户的信息for (const [key, mappingInfo] of Object.entries(keyMapping)) {if (firstUser.hasOwnProperty(key)) {const label = typeof mappingInfo === 'string' ? mappingInfo : mappingInfo.label;const index = userInfoSource.value.findIndex(item => item.label === label);if (index !== -1) {let displayValue = firstUser[key] || '-'; // 默认值// 检查是否存在枚举映射if (typeof mappingInfo === 'object' && mappingInfo.mapping) {console.log(firstUser[key], 'firstUser[key]');displayValue = mappingInfo.mapping[firstUser[key]] || displayValue;}userInfoSource.value[index].value = displayValue; // 更新 value 值}}}} else {console.error('userInfo is not a valid array or is empty:', userInfo.value);}
};// 5. 在组件挂载后更新用户信息
onMounted(() => {updateUserInfo(); // 确保在组件加载后执行
});</script><style lang="scss" scoped>
.userInfo {height: calc(100% - 25%);display: flex;flex-direction: column;.userInfo-list {height: calc(100% - 2rem);background-color: rgba(0, 15, 35, .5);padding: 0 1rem;margin-bottom: 1rem;flex: 1;margin-left: .5rem;}
}
</style>
