后端返回的数据是数字但是前端需要根据数字渲染不同状态(枚举方法)
时间: 2024-02-24 12:56:55 浏览: 112
AJax 把拿到的后台数据在页面中渲染的实例
可以使用枚举来解决这个问题。在后端定义一个枚举类型,将不同状态对应的数字作为枚举项的值,然后在前端根据返回的数字值来渲染对应的状态。
例如,假设后端返回的数字表示一个订单的状态,可以定义一个枚举类型如下:
```
enum OrderStatus {
CREATED = 1,
PAID = 2,
SHIPPED = 3,
DELIVERED = 4,
CANCELED = 5
}
```
在前端代码中,可以根据返回的状态值来渲染对应的状态:
```
const status = getOrderStatus(); // 后端返回的状态值
let statusText;
switch (status) {
case OrderStatus.CREATED:
statusText = '待支付';
break;
case OrderStatus.PAID:
statusText = '已支付';
break;
case OrderStatus.SHIPPED:
statusText = '已发货';
break;
case OrderStatus.DELIVERED:
statusText = '已送达';
break;
case OrderStatus.CANCELED:
statusText = '已取消';
break;
default:
statusText = '未知状态';
}
```
这样就可以根据后端返回的数字值来渲染对应的状态文字了。
阅读全文