vue根据后台传的id显示名称

在日常开发中，后端大哥做好数据之后，给前端就OK了

作为小白看到后端大哥给的id有些头大，干

这是我要实现的页面效果

 其中产品名称，分类，状态后端给的都是id

解决这个问题有很多方式，今天以状态为例，浅讲下

下面是接收到的后端数据

 这个状态值status有1和2两个值分别对应启用与不启用两个选项

我是这样写的

方法一

<el-table-column prop="status" label="状态:" width="220">
 <template #default="scope">
   <span v-if="scope.row.status == 2">启用</span>
   <span v-if="scope.row.status == 1">不启用</span>
 </template>
</el-table-column>

用v-if获取当前行的status的值，scope.row表示获取当前行

方法二

<el-table-column prop="base_status" label="基地状态" width="120">
  <template #default="scope">
    <div v-if="scope.row.base_status==1">开启</div>
    <div v-else>关闭</div>
  </template>
</el-table-column>

利用v-if 与 v-else

方法三

<el-table-column prop="status" label="状态:" width="220">
 <template #default="scope">
  <div>{{ statusArray[scope.row.status] }}</div>
 </template>
</el-table-column>

const status = { 1: "待审核", 2: "审核通过"};

提前给status的值赋上名字

都可以解决这个问题

其他内容，同理