ruoyi前端调用字典

### Ruoyi-Vue 框架中字典类型的使用方法 #### 定义字典类型 在 `Ruoyi-Vue` 框架中，字典类型用于映射特定字段到人类可读的标签。为了定义一个新的字典类型，在项目中的 `dict.ts` 文件内添加相应的键值对： ```typescript export const DICT_TYPE = { // ...其他已存在的字典项, JIFEN_RECORD: 'jifen_record' }; ``` 此操作确保了前端能够识别并处理新的字典条目[^1]。 #### 页面展示逻辑 当需要在一个表格列中显示由字典转换后的文本时，可以采用如下方式配置 `<el-table-column>` 组件: ```html <el-table-column label="积分类型" align="center" prop="classify"> <template #default="scope"> <dict-tag :type="DICT_TYPE.JIFEN_RECORD" :value="scope.row.classify"/> </template> </el-table-column> ``` 这里通过传递给 `<dict-tag>` 的属性指定要使用的字典类型以及当前行的数据作为输入参数，从而完成从数值到描述性的文字转化过程。 #### 后端支持 对于后端部分来说，通常会有一个接口返回所有的字典数据供前端调用。这些数据会被缓存起来以便快速查询。具体实现细节取决于项目的实际架构设计，但在大多数情况下都会涉及到数据库表的设计和API服务层面上的支持。 #### SPEL表达式的应用 虽然主要讨论的是前端如何利用字典功能，但是有时候也会遇到需要在某些场景下动态解析字符串的情况。这时就可以借助Spring Expression Language(SpEL)，它允许开发者编写强大的表达式来访问Java对象图谱、执行运算等复杂任务。例如，可以通过创建一个标准评估上下文实例，并向其中注入必要的变量或函数来进行更灵活的操作[^2]: ```java EvaluationContext context = new StandardEvaluationContext(); context.setVariable("someVar", someValue); ExpressionParser parser = new SpelExpressionParser(); String result = parser.parseExpression(expression).getValue(context, String.class); ``` 然而需要注意的是，这种技术更多应用于服务器端而非客户端JavaScript代码之中。

### 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": "在线" }` 最终呈现的结果将是根据实际数据自动匹配后的中文描述。 ---