笔记: SpringBoot + VUE实现数据字典展示功能
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(;´д`)ゞ
项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0"
下拉菜单部分渲染
<el-col :xs="12" :sm="12" :md="12" :lg="12">
<el-form-item :label="$t('i18n.flag')">
<el-select v-model="form.flag" :placeholder="$t('i18n.pleaseSelect')">
<el-option
v-for="(v, i) in dictionary.flag"
:label="v.dicttypeName"
<!-- 后端保存的是String类型,前端这边手动转换成字符型 -->
:value="v.dicttypeCode + ''"
:key="i"/>
</el-select>
</el-form-item>
</el-col>
在前端那边查询出来之后显示的结果就是"1"或"0",这样用户体验感会比较差,类似下图,意思表达得不清不楚
之前的写法是全部在前端页面中写死的固定值,但是当页面越来越多,有时候需要修改就得一个一个页面去翻,去改,感觉自己在划水的路上是越来越顺畅了,这不是一条咸鱼应该做的事情,所以这时候就该翻翻身了
后端返回的数据格式
public List<List<DatadicEntity>> getDictionary(String dictionarys) {
if (StringUtils.isBlank(dictionarys)) {
throw new CustomizeException(ExceptionEnum.PARAMETER);
}
List<List<DatadicEntity>> list = new ArrayList<>();
// 遍历所需字典类型
for (String s : dictionarys.split(",")) {
List<DatadicEntity> entityList = this.list(new QueryWrapper<DatadicEntity>().eq("dict_code", s));
// 将值转换成驼峰格式
entityList.forEach(sysDatadicEntity -> sysDatadicEntity.setDictCode(DSQLUtils.lineToHump(sysDatadicEntity.getDictCode())));
list.add(entityList);
}
return list;
}
前端钩子函数发起请求
export default {
data() {
return {
// 字典对象
dictionary: {}
}
},
mounted() {
// 查询FLAG,PUSH_TYPE两种类型
axios.get('/datadic?dictionarys=FLAG,PUSH_TYPE')
.then(result => {
const dictionaries = result.data.dictionary
// 遍历字典类型
for (const dictionary of dictionaries) {
const temp = []
// 获取数据字典的值和显示内容
for (const d of dictionary) {
const t = {}
t.dicttypeCode = d.dicttypeCode
t.dicttypeName = d.dicttypeName
temp.push(t)
}
// 添加到字典对象中
this.dictionary[dictionary[0].dictCode] = temp
}
})
}
}
前端这边使用的是Element框架,列表采用el-table展示
<el-table-column
v-for="(k, index) in data"
align="center"
:prop="k"
:label="$t('i18n.' + k)"
:key="index"
show-overflow-tooltip>
<!-- 重新渲染数据 -->
<template slot-scope="scope">
<!-- 判断当前字段是否在查询的数据字典对象中,不存在则渲染原数据 -->
<span v-if="!dictionary[k]">{{scope.row[k]}}</span>
<span v-else>
<!-- 存着则遍历该字典数据,获取对应的内容 -->
<div v-for="(v, i) in dictionary[k]" :key="i">
<span v-if="scope.row[k] === v.dicttypeCode">{{v.dicttypeName}}</span>
</div>
</span>
</template>
</el-table-column>
最终效果
数据字典表
做个笔记记录一下,希望大佬们指点指点,前后端都是自己瞎琢磨的,感觉代码Bug好多
自己给自己增加点击
https://blog.csdn.net/CJG753951/article/details/104566040
笔记: SpringBoot + VUE实现数据字典展示功能的更多相关文章
- 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- Springboot vue.js html 跨域 前后分离 shiro权限 集成代码生成器
本代码为 Springboot vue.js 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ mybaits+maven+接口 前端页面:html + ...
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- SpringBoot + Vue + nginx项目部署(零基础带你部署)
一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...
- 使用Docker部署Spring-Boot+Vue博客系统
在今年年初的时候,完成了自己的个Fame博客系统的实现,当时也做了一篇博文Spring-boot+Vue = Fame 写blog的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...
随机推荐
- AOP统一处理修改人、创建人、修改时间、创建时间
1.配置拦截 首先开启 <aop:aspectj-autoproxy proxy-target-class="true"/>代理.解释一下下面..的意思是多个 < ...
- mysql琐碎操作杂记
1.索引相关 查看表索引 show index from `user` 查看sql的执行计划 explain select * from where user 2.存储过程相关 查看存储过程 show ...
- ClipboardMonitor的下载和使用
本工具可以实时监视剪贴板的变化,可以用于32位和64位的Excel. 在任务窗格上面输入一个正则表达式,例如(\d+)\-(\d+),按下Enter确认. 然后在其他地方,例如浏览器页面或者记事本中复 ...
- iOS之NSString类型为什么要用copy修饰
在开发的过程中,只知道NSString类型最好用copy修饰而不能用strong,但是不知道为什么,今天了解了下,总算搞明白了. 如下所示,当修饰符为copy时,因为NSMutableString是N ...
- idea 连接mysql报错:Access denied for user 'root'@'localhost'(using password:YES)。
这两天在idea中开发Web项目时,连接MYSQL数据库,出现问题:Access denied for user 'root'@'localhost'(using password:YES). ...
- D - Association for Control Over Minds Kattis - control (并查集+STL)
You are the boss of ACM (Association for Control over Minds), an upstanding company with a single go ...
- LGOJ2257 YY的GCD
这题美好体验就是卡常 Description link 求 \[\sum^{n}_ {i=1} \sum^m_{j=1} [gcd(i,j)\in prime]\] 其中:\(1\leq n,m \l ...
- idea生成serialVersionUID
默认情况下Intellij IDEA不会提示继承了Serializable接口的类生成serialVersionUID的警告.如果需要生成serialVersionUID,就要在Preferences ...
- Self-examination
第一次参加省赛,算是真正感受到比赛的残酷.拿到好成绩,需要平时大量的积累,甚至也需要一点运气,然后我还做的不够,但我觉得我可以做得更好. 我之前是没有任何基础,大一才刚刚从知码开门入门.然后刚开始一直 ...
- Spring-security整理
出于某些原因,需要学习一下spring的安全框架.(研究半天,如果单单说用户认证和授权这块儿,我感觉还是shiro好用.) spring security介绍可以参考一下以下文档: (满满的羡慕啊)我 ...