后端实体类为@ApiModelProperty(value = "活动状态: [0-未开始, 1-进行中,2-已结束]") private Integer state,前端怎么实现后端传的Integer 类型转换成对应的状态
时间: 2024-03-26 18:40:34 浏览: 17
前端可以通过一个状态映射对象来实现将后端传的Integer类型转换成对应的状态。具体步骤如下:
1. 在前端定义一个状态映射对象,将后端传递的状态码和对应的状态文本进行映射,例如:
```javascript
const stateMap = {
0: '未开始',
1: '进行中',
2: '已结束'
};
```
2. 在页面中使用el-table等组件展示后端传递的数据时,可以使用自定义列模板的方式来展示状态文本,例如:
```html
<el-table-column label="状态" prop="state">
<template slot-scope="scope">
{{ stateMap[scope.row.state] }}
</template>
</el-table-column>
```
其中,通过scope.row.state获取后端传递的状态码,然后使用stateMap将其转换为对应的状态文本进行展示。
3. 如果需要在其他地方展示状态文本,可以使用类似的方式进行转换,例如:
```javascript
const stateText = stateMap[stateCode];
```
其中,stateCode为后端传递的状态码,stateText为转换后的状态文本。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)