广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/167462.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目中如何添加枚举
    目录vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1. 建一个js文件如:common.js2. 在页面直接引入vue项目添加枚举 添加文件,文件名为enum.js ...
    99+
    2022-11-13
  • 枚举如何在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项目中添加electron的详细代码
    1.在package.json中添加 "main": "electron.js", 在 “scripts”: {添加: "package": "electron-pac...
    99+
    2022-11-12
  • 如何在抖音vue项目中添加多个文件夹
    在抖音 vue 中添加多个文件夹可以帮助我们更好地管理我们的项目文件。下面我们将介绍如何在抖音 vue 中添加多个文件夹。首先,我们需要打开我们的抖音 vue 项目。然后在我们的项目根目录中创建一个新的文件夹。例如,我们创建一个名为 &qu...
    99+
    2023-05-14
  • 如何为老vue项目添加vite支持详解
    1、前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升...
    99+
    2022-11-12
  • Idea中如何添加Maven项目支持scala
    这篇文章主要介绍了Idea中如何添加Maven项目支持scala的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Idea中如何添加Maven项目支持scala文章都会有所收获,下面我们一起来看看吧。一、Scala...
    99+
    2023-07-05
  • 如何将项目添加到gitee上
    在软件开发领域,源代码管理是不可或缺的一环。将项目托管到云端上,可以保证代码不丢失,并且能够方便地与他人协作开发。Gitee是国内领先的开源代码托管平台之一,它为开发者提供了免费、稳定、高效的代码托管、项目管理、代码贡献评审、协作开发工具等...
    99+
    2023-10-22
  • vue-cli构建的项目如何手动添加eslint配置
    目录package.json里配置添加根目录下添加检测配置js文件.eslintrc.js添加忽略检测配置文件.eslintignorewebpack.base.conf.js ru...
    99+
    2022-11-13
  • tomcat添加不了项目如何解决
    如果您无法将项目添加到Tomcat中,请尝试以下解决方法:1. 检查Tomcat的配置文件:确保Tomcat的配置文件(server...
    99+
    2023-10-09
    tomcat
  • WinForm项目中如何添加帮助文档功能
    这篇文章主要讲解了“WinForm项目中如何添加帮助文档功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WinForm项目中如何添加帮助文档功能”吧!1. F1弹出帮助文档先找个后缀是pd...
    99+
    2023-07-02
  • idea普通java项目如何添加jar包
    普通的 Java 项目可以通过以下步骤来添加 jar 包:1. 将要使用的 jar 包下载到本地计算机上。2. 打开你的 Java ...
    99+
    2023-10-18
    idea java jar
  • Vue项目如何实现rsa加密
    目录如何实现rsa加密安装jsencrypt引入jsencrypt获取公钥(调接口)引入getPubKey使用rsa加密,解密,加签,解签安装引js加密解密加签,验签测试如何实现rs...
    99+
    2022-11-13
  • 如何在gitlab里将用户添加进项目
    Gitlab是一个基于Git的版本控制平台,许多开发者和团队都在上面进行代码管理。Gitlab不仅提供了代码版本控制的功能,同时也支持团队管理和项目管理,包括添加和管理团队成员。本文将介绍如何在Gitlab里将用户添加进项目。第一步:登录G...
    99+
    2023-10-22
  • Django项目如何给数据库添加约束
    只要你的Web开发知识不是语文老师教的,那么你应该已经知道一个合格的开发者应该永远抱着怀疑的眼光看用户提交的数据。你不仅需要在前端通过表单或其它方式进行验证,还需要在后台视图拿到用户...
    99+
    2022-11-12
  • 如何将本地项目添加到git管理
    今天小编给大家分享一下如何将本地项目添加到git管理的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、将本地已有项目添加到g...
    99+
    2023-07-02
  • Angular4项目中如何添加i18n国际化插件ngx-translate
    这篇文章给大家分享的是有关Angular4项目中如何添加i18n国际化插件ngx-translate的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。npm 安装 ngx-trans...
    99+
    2022-10-19
  • Java项目中如何使用集合实现添加元素
    本篇文章给大家分享的是有关Java项目中如何使用集合实现添加元素,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。初始化需要进行比较的集合,统一增加10万个元素,获取整个过程的执行...
    99+
    2023-05-31
    java 集合 添加元素
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作