【前端TS】TypeScript 数据类型——枚举 (Enum)实践

最新推荐文章于 2024-06-12 21:19:40 发布

素心2020

最新推荐文章于 2024-06-12 21:19:40 发布

阅读量3.3k

点赞数 2

文章标签： vue.js typescript

本文链接：https://blog.csdn.net/qq_44683095/article/details/106240893

版权

本文介绍了如何在Vue.js项目中利用TypeScript的枚举（Enum）来处理园区访问记录列表的多种状态样式。通过枚举定义访问状态与颜色样式的关系，实现了后端枚举数据与前端样式渲染的对应。详细步骤包括配置颜色样式，创建数字枚举，以及在列表渲染时绑定状态样式。

摘要由CSDN通过智能技术生成

需求：园区访问记录列表中，访问状态显示颜色：审核中、已拒绝、未到访、已到访、已签退、已过期等七种状态样式，效果如图：

在这里插入图片描述

API提供的数据：synthesizeStatus为状态标识。

在这里插入图片描述

实现步骤：后端使用枚举返回，前端亦可使用枚举做样式渲染。

1.配置访问状态对应的颜色样式。

2.TS枚举配置：数字枚举类型。

3.列表渲染时，访问状态绑定对应样式。

//创建枚举
enum visitStatus {
   
    status_other,
    status_none,
    status_agreed,
    status_rejected,
    status_notAccessed,
    status_Accessed,
    status_outOfGarden,
    status_expired,
}

export default visitStatus

枚举enumStatus内容

在这里插入图片描述

//转换成js
let visitStatus;

(function (visitStatus) {
   
    visitStatus[visitStatus["status_other"] = 0] = "status_other";

    visitStatus[visitStatus["status_none"] = 1] = "status_none";

    visitStatus[visitStatus["status_agreed"] = 2