vue项目中如何添加枚举

 更新时间:2022年09月14日 08:39:30   作者:loyd3  
这篇文章主要介绍了vue项目中如何添加枚举,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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
    }
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue如何实现验证码输入交互

    Vue如何实现验证码输入交互

    这篇文章主要介绍了Vue实现验证码输入交互的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • Vue动态路由路径重复及刷新丢失页面问题的解决

    Vue动态路由路径重复及刷新丢失页面问题的解决

    这篇文章主要介绍了Vue动态路由路径重复及刷新丢失页面问题的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue实现时间倒计时功能

    vue实现时间倒计时功能

    这篇文章主要为大家详细介绍了vue实现时间倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 在vue中实现PDF文件流预览功能

    在vue中实现PDF文件流预览功能

    这篇文章主要为大家详细介绍如何在vue中实现PDF文件流预览功能,文中的实现步骤讲解详细,对大家的学习或工作具有一定的参考价值,需要的可以参考一下
    2023-12-12
  • typescript中this报错的解决

    typescript中this报错的解决

    这篇文章主要介绍了typescript中this报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 详解在Vue中使用TypeScript的一些思考(实践)

    详解在Vue中使用TypeScript的一些思考(实践)

    这篇文章主要介绍了详解在Vue中使用TypeScript的一些思考(实践),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue3+el-select实现触底加载更多功能(ts版)

    vue3+el-select实现触底加载更多功能(ts版)

    这篇文章主要给大家介绍了基于vue3和el-select实现触底加载更多功能,文中有详细的代码示例,感兴趣的同学可以借鉴参考下
    2023-07-07
  • vue自定义组件@click点击失效问题及解决

    vue自定义组件@click点击失效问题及解决

    这篇文章主要介绍了vue自定义组件@click点击失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue遍历生成的输入框 绑定及修改值示例

    vue遍历生成的输入框 绑定及修改值示例

    今天小编就为大家分享一篇vue遍历生成的输入框 绑定及修改值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue3中的defineExpose使用示例教程

    vue3中的defineExpose使用示例教程

    这篇文章主要介绍了vue3中的defineExpose使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论