ruoyi-vue字典值

### Ruoyi-Vue 字典值的使用方法与配置 Ruoyi-Vue 是一款基于 Spring Boot 和 Vue 的前后端分离快速开发平台，其字典管理模块用于统一维护系统的数据字典。以下是关于 Ruoyi-Vue 中字典值的使用方法、示例以及配置相关内容。 #### 1. 字典值的功能概述 在 Ruoyi-Vue 中，字典主要用于存储系统中常见的枚举类型数据，例如性别、状态等。这些数据可以通过前端页面动态加载并展示给用户。字典的设计使得开发者无需硬编码业务逻辑中的固定选项列表，从而提高了代码的可维护性和扩展性[^3]。 #### 2. 字典值的配置方式 字典值的配置主要分为两部分：数据库表结构设计和后台管理系统界面操作。 - **数据库表结构** - `sys_dict_type` 表：存储字典类型信息。 - 主键字段：`dict_id` - 类型名称字段：`dict_name` - 类型键名字段：`dict_type` - `sys_dict_data` 表：存储具体的字典数据项。 - 主键字段：`dict_code` - 所属字典类型字段：`dict_sort`, `dict_label`, `dict_value`, `dict_type` - **后台管理系统界面操作** 开发者可以在后台管理系统中新增、修改或删除字典类型及其对应的字典数据项。具体路径通常为“系统工具 -> 参数设置 -> 数据字典”。 #### 3. 字典值的调用方式 Ruoyi-Vue 提供了多种方式来获取字典值，主要包括以下几种： - **通过 API 接口获取** 后台提供了一个通用接口 `/common/dict/data/type/{dictType}` 来返回指定类型的字典数据。该接口会将对应字典类型下的所有字典数据以 JSON 格式返回[^1]。 ```javascript axios.get('/common/dict/data/type/user_status').then(response => { console.log('User Status Dict:', response.data); }); ``` - **通过 Vuex 存储全局字典** 在某些场景下，为了减少重复请求，可以利用 Vuex 将常用字典缓存到应用的状态树中。Vuex 可以在初始化时一次性拉取多个字典类型的数据，并将其保存以便后续组件随时访问[^2]。 ```javascript const store = new Vuex.Store({ state: { dict: {} }, mutations: { setDict(state, payload) { Object.assign(state.dict, payload); } }, actions: { fetchDict({ commit }) { return axios.post('/common/dict/optionselect', ['user_status', 'gender']).then(res => { commit('setDict', res.data); }); } } }); // 组件中使用 computed: { userStatusOptions() { return this.$store.state.dict['user_status']; } } ``` - **模板渲染中的字典转换** 在前端页面中，如果需要将某个字段的数值映射为其对应的字典标签，则可以直接借助自定义过滤器完成这一过程。 ```html <template> <div>{{ status | dictFilter }}</div> </template> <script> export default { filters: { dictFilter(value, type) { let options = this.$store.state.dict[type]; if (options && Array.isArray(options)) { let option = options.find(item => item.value === value); return option ? option.label : ''; } else { return ''; } } }, data() { return { status: '0' }; } }; </script> ``` #### 4. 字典值的应用实例 假设有一个需求是在表格列中显示用户的在线状态（离线/在线），此时就可以利用上述提到的方式实现如下效果： ```vue <el-table-column prop="status" label="状态"> <template slot-scope="{ row }"> {{ row.status | dictFilter('user_status') }} </template> </el-table-column> ``` 其中，“user_status”的字典可能包含两条记录： - `{ "value": "0", "label": "离线" }` - `{ "value": "1", "label": "在线" }` 最终呈现的结果将是根据实际数据自动匹配后的中文描述。 ---