当前位置：首页 > news >正文

Vue2 字段值映射通用方法

news 2025/8/13 15:14:53

数据库存是Y/N 但是展示到页面要变成是/否，或者别的映射值。最直接的方式是使用三元表达式，但是随着项目越来越大，有很多这种映射管理起来不是很方便，所以抽取一个成一个配置文件就很好解决问题。

目录结构

定义映射文件mappings.js

// 定义所有字段的映射规则
const FieldMappings = {yn: { 'Y': '是', 'N': '否' },switch: { 'Y': '开', 'N': '关' },status: { '1': '启用', '2': '禁用', '3': '审核中' },level: { '1': '初级', '2': '中级', '3': '高级' },gender: {'0': '女','1': '男','2': '未知'}
}// 导出映射表
export default FieldMappings

dictUtils.js

import FieldMappings from './mappings'/*** 根据映射类型和值，返回对应的标签* 如果 map 不等于 undefined，那么：返回 map[value] 的值，如果这个值是 null 或 undefined，则返回 '未知'，否则：返回 原值value* @param {string} value - 原始值，如 'Y'* @param {string} mapType - 映射类型，如 'yn'* @returns {string} 映射后的文本，如 '是'*/
export function mapValue(value, mapTyspe) {const map = FieldMappings[mapType]return map !== undefined ? map[value] ?? "未知" : value;
}

HomeView.vue

<template><div><a-table :dataSource="data" :columns="columns" rowKey="id"><template slot="isFree" slot-scope="text, record, index"><!-- {{ record.isFree === 'Y' ? '是' : '否' }} -->{{ mapValue(record.isFree, "yn") }}</template></a-table></div>
</template><script>
// 导入通用map工具
import { mapValue } from '@/utils/dictUtils'export default {data() {return {data: [{ id: 1, name: "会员套餐", isFree: "Y", other: "ldj01" },{ id: 2, name: "试用套餐", isFree: "N", other: "ldj02" },],columns: [{ title: "名称", dataIndex: "name" },{title: "是否免费",dataIndex: "isFree",scopedSlots: { customRender: "isFree" },},{title: "其它",dataIndex: "other",scopedSlots: { customRender: "other" },},],};},methods: {mapValue  // 必须把 mapValue 挂到 methods,这样才能正常使用}
};
</script>

效果是一样的