Vue渲染用户表格时如何将role数字值替换为对应角色文本

一共3种生产环境常用的实现方式，根据自己的项目场景选就行：

方法1：模板内直接映射 #

适合简单页面、只有单处需要展示角色名的场景，不需要修改接口返回的原始数据。
首先在组件data中定义映射关系：

data() {
  return {
    users: [],
    // 数字和角色文本的对应关系，后续新增角色直接在这里补充键值对
    roleMap: {
      1: 'admin',
      2: 'user'
    }
  }
}

直接修改模板中角色列的渲染逻辑，加兜底值防止接口返回异常值时页面空白：

<tbody>
  <tr v-for="user in users" :key="user.id">
    <td>{{user.firstName}} {{user.lastName}}</td>
    <td>{{user.email}}</td>
    <td>{{ roleMap[user.role] || '未知角色' }}</td>
  </tr>
</tbody>

• 优势：逻辑写在一处，不需要额外处理接口数据，上手最快
• 劣势：如果同个组件多处要用到角色文本，需要重复写映射取值逻辑

方法2：接口返回数据时提前转换 #

适合后续组件逻辑中也需要频繁用到角色文本的场景，不破坏原始数字类型的role值（原始值可以继续用来做权限判断）。
修改getUsers方法里的赋值逻辑：

getUsers() {
  const roleMap = {
    1: 'admin',
    2: 'user'
  }
  axios.get(url).then(response => { 
    this.users = response.data.report.users.map(user => {
      return {
        ...user,
        // 新增专门用于展示的字段，保留原始role字段做业务逻辑判断
        roleText: roleMap[user.role] || '未知角色'
      }
    })
  })
}

模板中直接渲染新增的展示字段即可：

<td>{{ user.roleText }}</td>

• 优势：模板里不需要写多余逻辑，原始数据和展示数据分离，不会影响原有权限判断等业务逻辑
• 劣势：如果映射关系修改，需要找到对应的数据处理位置调整

方法3：全局公共方法/过滤器 #

适合整个项目中多个页面都需要展示角色名的场景，避免重复写相同的映射逻辑。
Vue2可以直接注册全局过滤器，在main.js中添加：

Vue.filter('formatRole', (roleValue) => {
  const roleMap = {
    1: 'admin',
    2: 'user'
  }
  return roleMap[roleValue] || '未知角色'
})

所有组件的模板里可以直接调用过滤器，不需要重复定义映射表：

<td>{{ user.role | formatRole }}</td>

Vue3移除了过滤器功能，可以把映射方法挂到全局属性上，效果一致。

• 优势：一次定义全项目复用，后续调整角色映射关系只需要改一处代码，维护成本最低
• 劣势：小项目单独用会有点冗余

通用注意点：无论选哪种方案，都必须加未知值兜底逻辑，避免接口返回未定义的角色值（比如0、3、null等）时页面显示空白。

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