先看一下所需要的目录：

所要的效果图：

搜索头部有两个下拉选择框，选择框里面的数据一般是常量，所以可以定义为全局常量方便管理：

第一步：定义常量(分模块进行管理)统一暴露出去

//角色状态 status.js
export const ROLE_STATUS = {
  STATUS_0: {
    desc: '启用',
    value: '0'
  },
  STATUS_1: {
    desc: '停用',
    value: '1'
  }
}

// 验证结果 select.js
export const VERIFY_RESULT = {
  PASS: {
    desc: '通过',
    value: '1'
  },
  NOT_PASS: {
    desc: '不通过',
    value: '0'
  }
}

/** module/index.js
 * 常量枚举池
 * 可以根据文件对枚举所属的模块进行拆分
 * 此文件主要是收集模块常量然后统一暴露出去
 */

 const EnumModule = {}

 const req = context => context.keys().map(context)
 const options = req(require.context('./', true, /\.js$/)) // 批量导入当前文件所在目录下的.js文件

 options.forEach(option => {
   Object.assign(EnumModule, {
     ...option
   })
 })

 export default EnumModule

第二步：定义常量工具方法再暴露出去

/** enum.js
 * 枚举工具类的定义
 * 可以全局使用this.$enum.getDescByValue()等等...
 */

 const EnumUtil = {}

 EnumUtil.install = function (Vue, data) {
   const constantInfo = data || {}
   const Enum = { ...data }
   /**
    * 根据枚举值获取描述
    * @param {*} constantName  枚举对象的名字
    * @param {*} value         枚举值
    * @param {*} desc          枚举值所对应的描述
    */
   Enum.getDescByValue = function (constantName, value) {
     if(!constantInfo.hasOwnProperty(constantName)){
       return ''
     }
     let constantItem = constantInfo[constantName] // 通过传进来的名字拿到所对应的常量项
     for (let item in constantItem) { // 循环常量项
       if (constantItem[item].value === value) {
         return constantItem[item].desc
       }
     }
   }

   Vue.prototype.$enum = Enum // 挂在原型上，方便使用

 }

 export default EnumUtil

第三步：利用`Vue.use`的作用去调用上图中的install方法

// constant/index.js

import Vue from 'vue'
import Enum from './enum' 
import EnumModule from './module'

Vue.use(Enum, EnumModule)

由于common文件下有可能存在全局过滤器或者全局指令，所以在common文件下会有一个index.js文件进行统一引入，方便main.js引入

// common/index.js

import './constant';
// import './filters'; // 有可能存在全局过滤器啥的，这里不举例

main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import './common' // 引入全局方法或常量或过滤器等等。。。


Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

此刻准备工作已经完成了，现在最主要就是使用我们所定义的全局变量

// Home.vue
<template>
  <div class="home">
    <div class="home-header">
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="文档验证结果">
          <el-select v-model="formInline.result"
                     placeholder="文档验证结果">
            <el-option v-for="(item, index) in $enum.VERIFY_RESULT"
                       :key="index"
                       :label="item.desc"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色状态">
          <el-select v-model="formInline.status"
                     placeholder="角色状态">
            <el-option v-for="(item, index) in $enum.ROLE_STATUS"
                       :key="index"
                       :label="item.desc"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      formInline: {
        status: '',
        result: '',
      }
    }
  },
  mounted() {
    console.log(this.$enum);// 这里你可以打印一下看看里面的数据
  },
  methods: {
    onSubmit() {
      console.log(this.formInline)
    },

  },
}
</script>

上图打印结果如下：

 使用枚举工具函数的场景：后端一般返回状态值给前端，状态值一般是数值或者其他，这时候渲染在列表的时候需要拿到状态值所对应的汉字，就使用以下表示就可以了

<span>{{ $enum.getDescByValue('ROLE_STATUS', scope.row.status) }}</span>

欧克，已经实现了开头那种效果了，光看不够，还得动手试一试，了解一下模块化管理的东西