Vue表格开发如何高效映射转换transaction_type字段展示值

核心思路 #

将枚举值和展示名称的映射关系单独抽离为统一配置对象，完全替换模板中多个v-if判断，后续新增、修改枚举仅需调整配置表，维护成本极低。

具体实现步骤 #

1. 新增枚举映射配置 #

直接在Vue实例的data中定义映射表即可，如果是大型项目也可以单独抽成公共常量文件全局复用：

const app = new Vue({
    el: '#app',
    data: {
        // 枚举映射表：key为后端返回的transaction_type原值，value为前端要展示的自定义名称
        transactionTypeMap: {
            'initial_account_balance': 'Opening Balance',
            'contact_debit': 'Customer Advance',
            'contact_credit': 'Customer',
            'account_debit': 'Customer sales',
            'account_credit': 'Customer Buy'
            // 后续新增枚举仅需在这里添加键值对，无需修改模板代码
        },
        userList: [/* 保留原有userList数据即可 */]
    }
});

2. 简化模板代码 #

删除原来所有的v-if判断代码，直接从映射表中取值即可，还可以添加兜底逻辑避免未定义的枚举值显示空白：

<td>
  <p>{{ transactionTypeMap[user.transaction_type] || user.transaction_type }}</p>
</td>

扩展优化方案 #

如果该枚举映射需要在项目多个页面复用，可以封装为Vue全局过滤器：

// 全局注册后所有组件都可以直接调用该过滤器
Vue.filter('formatTransactionType', function (type) {
  const transactionTypeMap = {
    'initial_account_balance': 'Opening Balance',
    'contact_debit': 'Customer Advance',
    // 其余枚举映射配置
  }
  return transactionTypeMap[type] || type
})

模板中直接调用过滤器即可：

<td>
  <p>{{ user.transaction_type | formatTransactionType }}</p>
</td>

方案优势 #

• 维护成本极低：新增、修改、删除枚举映射仅需调整配置表一处，不需要改动模板逻辑
• 代码简洁：模板仅需一行代码，避免了成百上千个v-if的冗余判断
• 可复用性高：抽成全局过滤器或公共常量后，项目所有用到该枚举的场景都可以复用，无需重复写判断逻辑

内容的提问来源于stack exchange，提问作者Selaminko Elam