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

本文通过实际使用案例来简单的记录一下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<SysDictData> data = dictTypeService.selectDictDataByType(dictType);
    if (StringUtils.isNull(data))
    {
        data = new ArrayList<SysDictData>();
    }
    return success(data);
}

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

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

4、单选框展示字典数据

期望展示效果

前端代码

       <el-col :span="12">
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio
              v-for="dict in sexOptions"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

下拉框展示字典数据

vue element ui代码 filterable:可搜索

<el-col :span="12">

        <el-form-item label="用户性别">
          <el-select filterable v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>   

4.复选框

table表格代码

   <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat" />


   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低代码开发平台

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