vue项目中如何添加枚举

目录
  • vue项目添加枚举
    • 在vue文件中引用
    • 使用方法
  • vue中枚举的使用
    • 1. 建一个js文件如：common.js
    • 2. 在页面直接引入

vue项目添加枚举

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

文件内容：

//使用方法
/**
 * 获取枚举值：STATUSMAP.SH
 * 获取枚举描述：STATUSMAP.getDesc('SH')
 * 通过枚举值获取描述：STATUSMAP.getDescFromValue('TG')
 */
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
    }
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3声明字段名为枚举的类型详解

    目录 vue3声明字段名为枚举类型 下面是Type的枚举声明,共有6个字段 vue使用提升之"枚举"应用 方式一(适用于简易过滤器中) 方拾二(过滤器,循环列表) vue3声明字段名为枚举类型 下面是Type的枚举声明,共有6个字段 enum Type {   primary = "primary",   success = "success",   warning = "warning",   warn = "wa

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • vue动态绑定多个class以及带上三元运算或其他条件

    目录 动态绑定多个class带上三元运算或其他条件 动态绑定属性 例子 实现 一个标签中含有多个class(其中包含三元表达式)的写法 1.数组形式 2.字符串拼接 动态绑定多个class带上三元运算或其他条件 动态绑定属性 在v-for循环中,根据需求,在10条数据里,前3条添加不一样的样式. 例子 设置第一条数据的样式为one <li v-for="(item,index) in items" :key="index">     <span :

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue项目中如何添加枚举

    目录 vue项目添加枚举 在vue文件中引用 使用方法 vue中枚举的使用 1. 建一个js文件如:common.js 2. 在页面直接引入 vue项目添加枚举 添加文件,文件名为enum.js 文件内容: //使用方法 /** * 获取枚举值:STATUSMAP.SH * 获取枚举描述:STATUSMAP.getDesc('SH') * 通过枚举值获取描述:STATUSMAP.getDescFromValue('TG') */ let STATUSMAP = createEnum({ SH:

  • vue项目中使用bpmn为节点添加颜色的方法

    内容概述 bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples 本文主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 前情提要 上文我们已经实现了在外部更改节点名.此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色.例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求.效果: 方式1:modeling.setColo

  • vue项目中使用rem,在入口文件添加内容操作

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: <script> window.onload = function () { var setRem = function () { // UI设计稿的宽度 var uiWidth = 1200; // 移动端屏幕宽度 var winWidth = document.documentElement.clientWidth; // 比率 var rate = winWidth / uiWidth; //

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • vue项目中添加electron的详细代码

    vue项目中添加electron的详细代码

    1.在package.json中添加 "main": "electron.js", 在 "scripts": {添加: "package": "electron-packager ./ appName --overwrite" 在"dependencies": {添加: "electron-share-memory": "^1.0.1", &quo

  • 在vue项目中封装echarts的步骤

    在vue项目中封装echarts的步骤

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题.这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题 我希望这个echarts组件能设计成什么样 业务数据和样式配置数据分离,我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • 如何去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'menu', component: menu, children: [ { path: 'organization', component: organization, children: [ { path:

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

随机推荐