笔记: 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的一次小结作为记录和介绍.从完成实现到现在,也断断续续的根据实际的使用 ...
随机推荐
- 吴裕雄--天生自然 PYTHON3开发学习:循环语句
n = 100 sum = 0 counter = 1 while counter <= n: sum = sum + counter counter += 1 print("1 到 ...
- 使用XAMPP集成开发环境安装Apache、PHP的配置说明
一.安装XAMPP 双击安装包xamppinstaller.exe,可完成XAMPP的安装,与其他软件安装并无区别. 二.配置Apache端口,使用其可以正确启动 点击Start,启动Apache时可 ...
- UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释(转)
layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit——————- - (voi ...
- P1010 幂次方 P1022 计算器的改良
P1010 幂次方 一.题目 https://www.luogu.org/problemnew/show/P1010 二.代码 #include<bits/stdc++.h> using ...
- F5中设置OA通过F5进行访问设置
- D. Array Splitting(后缀数组)
You are given an array
- IPC之——信号量集(多个信号量)
如果两个进程不仅需要同步,还要保证先后执行顺序,就要用两个信号量(互斥锁)来解决 //栅栏模型:实现以下框架中的四个子进程 所有进程做完任务后 在一起执行下一次 #include <stdio ...
- 《C 程序设计语言》练习1-4
#include<stdio.h> /*当celsius=0,1,...,100时,打印摄氏温度与华氏温度对照表; 浮点数版本*/ main () { float fahr,celsius ...
- Qt 线程池QThreadPool类、QRunnable类
QThreadPool类 用来管理 QThreads.此类中的所有函数都是线程安全的. 主要属性: 1.activeThreadCount: 此属性表示线程池中的活动线程数,通过activeThrea ...
- django框架进阶-cookie和session-长期维护
############### python基础回顾:装饰器 ################ # 装饰器非常重要,1是写代码的时候,2是面试的时候,没有python开发不问装饰器的, # ...