先看一下所需要的目录:
所要的效果图:
搜索头部有两个下拉选择框,选择框里面的数据一般是常量,所以可以定义为全局常量方便管理:
第一步:定义常量(分模块进行管理)统一暴露出去
//角色状态 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>
欧克,已经实现了开头那种效果了,光看不够,还得动手试一试,了解一下模块化管理的东西