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

最新推荐文章于 2026-04-03 05:30:00 发布

原创最新推荐文章于 2026-04-03 05:30:00 发布 · 3.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #typescript

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

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

在这里插入图片描述

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] = "status_agreed";

    visitStatus[visitStatus["status_rejected"] = 3] = "status_rejected";

    visitStatus[visitStatus["status_notAccessed"] = 4] = "status_notAccessed";

    visitStatus[visitStatus["status_Accessed"] = 5] = "status_Accessed";

    visitStatus[visitStatus["status_outOfGarden"] = 6] = "status_outOfGarden";

    visitStatus[visitStatus["status_expired"] = 7] = "status_expired";
})(visitStatus || (visitStatus = {}));

export default visitStatus

页面实现

//vue template 页面结构
          <template #title>
            <div class="card-head">
              <div v-if="item.visitorType">邀约时间 {{item.startTimeDesc}} - {{item.endTimeDesc}}</div>
              <div v-else>预约时间 {{item.startTimeDesc}} - {{item.endTimeDesc}}</div>
              //访问状态渲染，vue :class 动态样式渲染
              <div :class="getIsStatusColor(item.synthesizeStatus)">{{item.synthesizeStatusDesc}}</div>
            </div>
          </template>

<script lang="ts">
    import visitStatus from "@/lib/enumerate";
    import AbpBase from "../../../lib/abpbase";
    import { Component, Watch } from "vue-property-decorator";
    export default class VisitorHome extends AbpBase {
      /**预约记录状态 */
      getIsStatusColor(status) {
      return this.enumStatus[status];
      }
}
</script>

<style scoped lang="less">//scoped 防止样式全局污染
/** 访问状态 */
.status_other {}

.status_none {
	color: rgba(255, 192, 0, 1);
}

.status_agreed {
	color: rgba(1, 198, 106, 1);
}

.status_rejected {
	color: rgba(242, 36, 51, 1);
}

.status_notAccessed {
	color: rgba(242, 36, 51, 0.6);
}

.status_Accessed {
	color: rgba(248, 140, 16, 1);
}

.status_outOfGarden {
	color: rgba(45, 46, 48, 1);
}

.status_expired {
	color: rgba(45, 46, 48, 0.4);
}
</style>