返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中如何添加枚举
  • 742
分享到

vue项目中如何添加枚举

2024-04-02 19:04:59 742人浏览 独家记忆
摘要

目录Vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1. 建一个js文件如:common.js2. 在页面直接引入vue项目添加枚举 添加文件,文件名为enum.js

vue项目添加枚举

添加文件,文件名为enum.js

文件内容:

//使用方法

let STATUSMAP = createEnum({
  SH: [0, '审核中'],
  TG: [1, '审核通过'],
});
function createEnum(definition) {
  const valueMap = {};
  const descMap = {};
  for (const key of Object.keys(definition)) {
    const [value, desc] = definition[key];
    valueMap[key] = value;
    descMap[value] = desc;
  }
  return {
    ...valueMap,
    getDesc(key) {
      return (definition[key] && definition[key][1]) || '无';
    },
    getDescFromValue(value) {
      return descMap[value] || '无';
    }
  }
}
export default STATUSMAP;

在vue文件中引用

import STATUSMAP from "@/enum";

使用方法

在js中使用

//获取枚举值:
STATUSMAP.SH
//获取枚举描述:
STATUSMAP.getDesc(‘SH')
//通过枚举值获取描述:
STATUSMAP.getDescFromValue(‘TG')

vue中枚举的使用

涉及的场景:根据后端返回的字段匹配相应的文字,进行页面展示

1. 建一个js文件如:common.js

const enums = {
// 角色
roles: {
    ADMINISTRATOR: '管理人员',
    LEADER: '队长'
  }
}
export {
  enums
  }

2. 在页面直接引入

html

    <div class="table-detail">
      <el-table v-loading="loading" :data="list" height="222">
        <el-table-column label="序号" type="index">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="人员分工">
          <template slot-scope="scope">
            {{ enums.roles[scope.row.roles] }}
          </template>
        </el-table-column>
      </el-table>
    </div>

js:

import { enums } from '@/utils/common'
data() {
    return {
      enums: enums
    }
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue项目中如何添加枚举

本文链接: https://lsjlt.com/news/167462.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue项目中如何添加枚举
    目录vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1. 建一个js文件如:common.js2. 在页面直接引入vue项目添加枚举 添加文件,文件名为enum.js ...
    99+
    2024-04-02
  • 枚举如何在java项目中使用
    今天就跟大家聊聊有关枚举如何在java项目中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、枚举类型作为常量package myenum; public enum Color...
    99+
    2023-05-31
    java 枚举 ava
  • oracle如何给字段添加枚举值
    在Oracle数据库中,字段的枚举值可以使用多种方式实现。一种常用的方式是通过创建一个包含所有可能枚举值的表,并将该表与主表关联。具...
    99+
    2023-09-05
    oracle
  • 如何正确的在C#项目中使用枚举
    本篇文章给大家分享的是有关如何正确的在C#项目中使用枚举,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。枚举基础枚举类型的作用是限制其变量只能从有限的选项中取值,这些选项(枚举类...
    99+
    2023-06-06
  • java枚举类添加属性报错如何解决
    在Java中的枚举类是不能直接添加属性的,因为枚举常量是有限且预定义的,不支持实例化和自定义属性。不过,可以通过在枚举常量中定义属性...
    99+
    2023-10-12
    java
  • 如何在抖音vue项目中添加多个文件夹
    在抖音 vue 中添加多个文件夹可以帮助我们更好地管理我们的项目文件。下面我们将介绍如何在抖音 vue 中添加多个文件夹。首先,我们需要打开我们的抖音 vue 项目。然后在我们的项目根目录中创建一个新的文件夹。例如,我们创建一个名为 &qu...
    99+
    2023-05-14
  • 如何为老vue项目添加vite支持详解
    1、前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升...
    99+
    2024-04-02
  • vue项目中添加electron的详细代码
    1.在package.json中添加 "main": "electron.js", 在 “scripts”: {添加: "package": "electron-pac...
    99+
    2024-04-02
  • Idea中如何添加Maven项目支持scala
    这篇文章主要介绍了Idea中如何添加Maven项目支持scala的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Idea中如何添加Maven项目支持scala文章都会有所收获,下面我们一起来看看吧。一、Scala...
    99+
    2023-07-05
  • Golang中如何实现枚举
    ...
    99+
    2023-06-29
  • VB.NET枚举如何增加编程速率
    小编给大家分享一下VB.NET枚举如何增加编程速率,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!以VB.NET为例讲解相关效率提高方法。主要就是针对VB.NET枚举的使用来获得效率的提高。当你还使用For&hell...
    99+
    2023-06-17
  • 如何将项目添加到gitee上
    在软件开发领域,源代码管理是不可或缺的一环。将项目托管到云端上,可以保证代码不丢失,并且能够方便地与他人协作开发。Gitee是国内领先的开源代码托管平台之一,它为开发者提供了免费、稳定、高效的代码托管、项目管理、代码贡献评审、协作开发工具等...
    99+
    2023-10-22
  • vue-cli构建的项目如何手动添加eslint配置
    目录package.json里配置添加根目录下添加检测配置js文件.eslintrc.js添加忽略检测配置文件.eslintignorewebpack.base.conf.js ru...
    99+
    2024-04-02
  • C++中enum枚举如何使用
    这篇文章将为大家详细讲解有关C++中enum枚举如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。C++ enum枚举格式:enum < 枚举类型名> {< 枚举表&g...
    99+
    2023-06-17
  • 在Java中如何使用枚举
    这篇文章给大家分享的是有关在Java中如何使用枚举的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。枚举类型(Enumerated Types) 让我们先看下面这一段小程序: enum Day {SUNDAY, MO...
    99+
    2023-06-03
  • 枚举如何在MyBatis中使用
    这篇文章给大家介绍枚举如何在MyBatis中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。具体方法如下:public enum ComputerState { OPEN(10), //开启 CLOSE(11),...
    99+
    2023-05-31
    mybatis 枚举
  • C++中的枚举如何使用
    这篇文章主要介绍了C++中的枚举如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇C++中的枚举如何使用文章都会有所收获,下面我们一起来看看吧。一、枚举是什么枚举(enumeration)类型用于存放用户指...
    99+
    2023-07-05
  • 一文搞懂Java项目中枚举的定义与使用
    目录什么是枚举为什么需要枚举类枚举类的定义和使用什么是枚举 最近写新项目!有很多数据字典常量需要定义和使用、就顺便记录一下、什么是枚举类呢?就是用enum修饰是一种Java特殊的类,...
    99+
    2024-04-02
  • tomcat添加不了项目如何解决
    如果您无法将项目添加到Tomcat中,请尝试以下解决方法:1. 检查Tomcat的配置文件:确保Tomcat的配置文件(server...
    99+
    2023-10-09
    tomcat
  • WinForm项目中如何添加帮助文档功能
    这篇文章主要讲解了“WinForm项目中如何添加帮助文档功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WinForm项目中如何添加帮助文档功能”吧!1. F1弹出帮助文档先找个后缀是pd...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作