vue-element-admin封装字典

在 Vue-Element-Admin 中封装字典，可以方便地在项目中使用，避免了重复定义和管理字典的麻烦。

下面是封装字典的基本步骤：

1. 在项目中创建一个 `src/utils/dict.js` 文件，用于存储字典数据。

// src/utils/dict.js
const dict = {
  gender: [
    { label: '男', value: 1 },
    { label: '女', value: 2 }
  ],
  status: [
    { label: '正常', value: 1 },
    { label: '禁用', value: 2 },
    { label: '删除', value: 3 }
  ]
}

export default dict

2. 在项目中创建一个 `src/utils/filters.js` 文件，用于定义 Vue 过滤器。

// src/utils/filters.js
import dict from './dict'

export default {
  dict(value, type) {
    if (!value) return ''
    const dictData = dict[type] || []
    const item = dictData.find(item => item.value === value)
    return item ? item.label : ''
  }
}

3. 在 `main.js` 中全局注册 Vue 过滤器。

// main.js
import Vue from 'vue'
import App from './App.vue'
import filters from '@/utils/filters'

// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

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

4. 在项目中使用字典过滤器。

<!-- 使用字典过滤器 -->
<el-table-column prop="gender" label="性别" :formatter="$filters.dict.bind(null, 'gender')"></el-table-column>

<!-- 输出结果 -->
{{ 1 | dict('gender') }}  <!-- 输出 '男' -->
{{ 2 | dict('gender') }}  <!-- 输出 '女' -->

这样，就可以方便地在项目中使用字典数据了。如果需要更新字典数据，只需要修改 `src/utils/dict.js` 文件即可。