字典管理是用来维护数据类型的数据，如下拉框、单选按钮、复选框、树选择的数据，方便系统管理员维护。主要功能包括：字典分类管理、字典数据管理.

本文通过实际使用案例来简单的记录一下ruoyi vue 字典的使用。

1、数据展示

2、加载字典数据

created() {
  this.getDicts("sys_user_sex").then(response => {
    this.sexOptions = response.data;
  });
},

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}

3、java后端接口服务

接口路径截图，SysDictDataController类

package com.ruoyi.web.controller.system;

如下是接口实现代码

/**
 * 根据字典类型查询字典数据信息
 */
@GetMapping(value = "/type/{dictType}")
public AjaxResult dictType(@PathVariable String dictType)
{
    List data = dictTypeService.selectDictDataByType(dictType);
    if (StringUtils.isNull(data))
    {
        data = new ArrayList();
    }
    return success(data);
}

其中dictType是从参数路径中获取，对应前端的dictType（url: '/system/dict/data/type/' + dictType）,

如下图的状态也是通过字典值进行翻译，可以看到右侧通过接口，返回字典数据。

4、单选框展示字典数据

期望展示效果

前端代码

       
        
          
            {{dict.label}}
          
        
      

下拉框展示字典数据

vue element ui代码 filterable:可搜索

4.复选框

table表格代码

   


   sexFormat(row){
     return this.selectDictLabel(this.sexOptions, row.type);
   }

非字典表中的数据反显

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。