字典管理是用来维护数据类型的数据,如下拉框、单选按钮、复选框、树选择的数据,方便系统管理员维护。主要功能包括:字典分类管理、字典数据管理.
本文通过实际使用案例来简单的记录一下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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表