如何将数据库某列的值（如日期）作为表格的列名

如何将数据库某列的值（如日期）作为表格的列名

需求：前端需要展示如下的二维表格，其中表格的日期是数据库表里data的值，每行不同的值是表格里的字段值，也就是需要将表里的数据行转列，列转行，本来想着通过sql和mybatis映射完成转换，但是搜了一下没有找到自己想要的方法，只好通过java代码来完成转换。
在这里插入图片描述
在这里插入图片描述
前端代码：

<template>
<div>
<el-form :model="searchForm" ref="searchForm" size="small" :inline="true" label-width="68px">
<el-form-item label="日期" prop="date">
<el-date-picker
v-model="searchForm.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="query">搜索</el-button>
<el-button type="info" icon="el-icon-download" size="mini" @click="upload">导出</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form><el-table :data="usdDataList" border stripe v-loading="loading">
<el-table-column prop="date" label="日期" width="155" align="center">
<el-table-column prop="d0" label="项目USD" width="155" align="center"></el-table-column>
</el-table-column>
<el-table-column
v-for="(item,index) in listLabel"
:key="index"
:prop="item.prop"
:label="item.label"
/>
</el-table>
<el-table :data="ureDataList" border stripe v-loading="loading">
<el-table-column prop="date" label="日期" width="155" align="center">
<el-table-column prop="d0" label="项目EUR" width="155" align="center"></el-table-column>
</el-table-column>
<el-table-column
v-for="(item,index) in listLabel"
:key="index"
:prop="item.prop"
:label="item.label"
/>
</el-table>
</div>
</template>
<script>
import Api from "@/constants/Api.js";
import { getDate, getNextDate, parseTime } from "@/utils/utils";
export default {
name: "zmqldxcsb",
data() {
return {
listLabel: [],
usdDataList: [],
ureDataList: [],
searchForm: {
date: [getDate(0), getDate(30)]
},
loading: false
};
},
created() {
this.query();
},
methods: {
resetQuery() {
this.searchForm = {
date: [getDate(0), getDate(30)]
};
},
query() {
this.loading = true;
this.$axios({
method: "post",
url: Api.freeTradMobility,
data: {
startTime: parseTime(this.searchForm.date[0], "{y}{m}{d}"),
endTime: parseTime(this.searchForm.date[1], "{y}{m}{d}")
}
})
.then(res => {
this.listLabel = res.labelList;
this.usdDataList = res.dataMap["USD"];
this.ureDataList = res.dataMap["EUR"];
this.loading = false;
})
.catch(error => {
console.log(error.message);
this.$message.error("查询数据出错！");
this.loading = false;
});
}
};
</script>
<style scoped>
/* ::v-deep .el-table thead.is-group th {
background: none;
padding: 0px;
} */
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 100px;
top: 0;
left: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-43deg);
transform: rotate(-70deg);
-webkit-transform-origin: top;
transform-origin: top;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
content: "";
position: absolute;
width: 1px;
height: 100px;
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.2;
display: block;
transform: rotate(-45deg);
transform: rotate(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
height: 27.4px;
}
</style>

每个表格的代码：

<el-table :data="usdDataList" border stripe v-loading="loading">
<el-table-column prop="date" label="日期" width="155" align="center">
<el-table-column prop="d0" label="项目USD" width="155" align="center"></el-table-column>
</el-table-column>
<el-table-column
v-for="(item,index) in listLabel"
:key="index"
:prop="item.prop"
:label="item.label"
/>
</el-table>

下面是需要的数据格式，其中日期是动态的，所以日期和每行的数据是分开的，日期的数据格式：

"labelList": [
{
"label": "20231024",
"prop": "d20231024"
},
{
"label": "20231025",
"prop": "d20231025"
},
{
"label": "20231026",
"prop": "d20231026"
},
{
"label": "20231027",
"prop": "d20231027"
},
{
"label": "20231028",
"prop": "d20231028"
}
],

label就是每列展示的日期值，prop就是每行绑定的数据。

表格数据的格式：

[
{
"d20231028": "10",
"d0": "日出余额",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "总行2036",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "即远期",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "掉期",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "拆借",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "回购",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "TRS",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "债券到期",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "债券投资",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "10",
"d0": "客户进出款（合计）",
"d20231027": "10",
"d20231026": "10"
},
{
"d20231028": "vdvdsvd",
"d0": "备注",
"d20231027": "vdvdsvd",
"d20231026": "vdvdsvd"
},
{
"d20231028": "10",
"d0": "日终余额",
"d20231027": "10",
"d20231026": "10"
}
]

其中d0就是表格代码第三行的prop="d0"绑定的值，其余的就是每个日期绑定的值。
针对这两种格式，我们在java代码中就是需要把查到的数据进行组装。

java代码如下。

@Autowired
private DaoSupport daoSupport;//方法入口
public FrnFreeTradMobilityOut query(FrnFreeTradMobilityIn input) {
//处理时间
String startDate = input.getStartTime();
String endDate = input.getEndTime();
//生成日期的集合
List<Label> labels = createdLabelList(startDate, endDate);FrnFreeTradMobilityOut out = new FrnFreeTradMobilityOut();
out.setLabelList(labels);
Map<String, Object> queryMap = new HashMap<>();
queryMap.put("startDate", startDate);
queryMap.put("endDate", endDate);//查询表格数据
List<FrnFreetradMobilityPo> list = daoSupport.selectList(FrnFreetradMobilityPo.class.getName() + ".select", queryMap);//组装数据，因为我是多个表格，所以采用map形式，key为每个表格的名称，值为表格数据，如果只有一个表格，可以用返回list
Map<String, List<Map<String, String>>> dataMap = createdDataMap(list);
out.setDataMap(dataMap);
return out;
}private Map<String, List<Map<String, String>>> createdDataMap(List<FrnFreetradMobilityPo> list) {
Map<String, List<Map<String, String>>> result = new HashMap<>();
//循环处理每条记录
for (int i = 0; i < list.size(); i++) {
FrnFreetradMobilityPo frnFreetradMobilityPo = list.get(i);
String project = frnFreetradMobilityPo.getProject();//判断当前数据所在的表格是否在map中，不存在就初始化
if (!result.containsKey(project)) {
initDataMap(result, project);
}
List<Map<String, String>> dataList = result.get(project);
//如下map是每行的数据，rcyeMap对应的是日出余额行的数据，其余的同理
Map<String, String> rcyeMap = dataList.get(0);
Map<String, String> zhMap = dataList.get(1);
Map<String, String> jyqMap = dataList.get(2);
Map<String, String> dqiMap = dataList.get(3);
Map<String, String> cjieMap = dataList.get(4);
Map<String, String> hgouMap = dataList.get(5);
Map<String, String> TRSMap = dataList.get(6);
Map<String, String> zqdqMap = dataList.get(7);
Map<String, String> zqtzMap = dataList.get(8);
Map<String, String> khjckMap = dataList.get(9);
Map<String, String> bzMap = dataList.get(10);
Map<String, String> rzyeMap = dataList.get(11);String key = "d" + frnFreetradMobilityPo.getDate();
rcyeMap.put(key, frnFreetradMobilityPo.getRcye());
zhMap.put(key, frnFreetradMobilityPo.getZh());
jyqMap.put(key, frnFreetradMobilityPo.getJyq());
dqiMap.put(key, frnFreetradMobilityPo.getDqi());
cjieMap.put(key, frnFreetradMobilityPo.getCjie());
hgouMap.put(key, frnFreetradMobilityPo.getHgou());
TRSMap.put(key, frnFreetradMobilityPo.getTrs());
zqdqMap.put(key, frnFreetradMobilityPo.getZqdq());
zqtzMap.put(key, frnFreetradMobilityPo.getZqtz());
khjckMap.put(key, frnFreetradMobilityPo.getKhjck());
bzMap.put(key, frnFreetradMobilityPo.getBz());
rzyeMap.put(key, frnFreetradMobilityPo.getRzye());//eur的表比别的多一列，这时进行特殊处理
if (FrnConstans.EUR.equals(project)) {
Map<String, String> xxzdMap = dataList.get(12);
xxzdMap.put(key, frnFreetradMobilityPo.getXzzd());
}
result.put(list.get(i).getProject(), dataList);
}
if (result.containsKey("EUR")) {
result.get("EUR").add(1, result.get("EUR").get(12));
result.get("EUR").remove(13);
}return result;
}//每行数据的初始化
private void initDataMap(Map<String, List<Map<String, String>>> result, String project) {
List date = new ArrayList<>();
Map<String, String> rcyeMap = new HashMap<>();
Map<String, String> zhMap = new HashMap<>();
Map<String, String> jyqMap = new HashMap<>();
Map<String, String> dqiMap = new HashMap<>();
Map<String, String> cjieMap = new HashMap<>();
Map<String, String> hgouMap = new HashMap<>();
Map<String, String> TRSMap = new HashMap<>();
Map<String, String> zqdqMap = new HashMap<>();
Map<String, String> zqtzMap = new HashMap<>();
Map<String, String> khjckMap = new HashMap<>();
Map<String, String> bzMap = new HashMap<>();
Map<String, String> rzyeMap = new HashMap<>();rcyeMap.put("d0", "日出余额");
zhMap.put("d0", "总行2036");
jyqMap.put("d0", "即远期");
dqiMap.put("d0", "掉期");
cjieMap.put("d0", "拆借");
hgouMap.put("d0", "回购");
TRSMap.put("d0", "TRS");
zqdqMap.put("d0", "债券到期");
zqtzMap.put("d0", "债券投资");
khjckMap.put("d0", "客户进出款（合计）");
bzMap.put("d0", "备注");
rzyeMap.put("d0", "日终余额");date.add(rcyeMap);
date.add(zhMap);
date.add(jyqMap);
date.add(dqiMap);
date.add(cjieMap);
date.add(hgouMap);
date.add(TRSMap);
date.add(zqdqMap);
date.add(zqtzMap);
date.add(khjckMap);
date.add(bzMap);
date.add(rzyeMap);//eur表的特殊处理
if (FrnConstans.EUR.equals(project)) {
Map<String, String> xxzdMap = new HashMap<>();
xxzdMap.put("d0", "线下账单");
date.add(xxzdMap);
}
result.put(project, date);
}//创建日期的数据，Label类的代码在最后
private List<Label> createdLabelList(String startDate, String endDate) {
List<Label> labelList = new ArrayList<>();
LocalDate startTime = LocalDate.of(Integer.parseInt(startDate.substring(0, 4)),Integer.parseInt(startDate.substring(4, 6)), Integer.parseInt(startDate.substring(6, 8)));
LocalDate endTime = LocalDate.of(Integer.parseInt(endDate.substring(0, 4)), Integer.parseInt(endDate.substring(4, 6)), Integer.parseInt(endDate.substring(6, 8)));
long between = ChronoUnit.DAYS.between(startTime, endTime);
for (int i = 0; i <= between; i++) {
LocalDate date = startTime.plusDays(i);
Label label = new Label(date.toString().replace("-", ""), "d" + (date.toString().replace("-", "")));
labelList.add(label);
}
return labelList;
}@Data
@AllArgsConstructor
public class Label {
private String label;
private String prop;
}

以上就是前后端所有的代码了，如果您有更好的实现方法，欢迎您分享您的方法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/120519.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue手动拖入和导入excel模版

vue手动拖入和导入excel模版

1.列表按钮 <el-button click“importExcel(scope.row.id)” size“small” type“text”>导入excel模版 2.按钮弹框 3.data定义数据 data () { return { projectId: ‘’, importDialogVisible: false, fileList: [], //手动上传 upload_file: ‘’, //导入excel模版…
阅读更多...
设计模式思维导图

设计模式思维导图

ProcessOn思维导图链接
阅读更多...
性能测试工具：如何学习JMeter?

性能测试工具：如何学习JMeter?

JMeter是一个广泛应用于Web应用程序性能测试与负载测试的开源负载测试工具&#xff0c;学习JMeter则可以协助软件测试工程师更好地进行自动化性能测试与负载测试&#xff0c;本文就来介绍下如何学习JMeter。 1. 应用场景 (1) Web应用程序、数据库服务器、FTP服务器、SOAP和RE…
阅读更多...
移动应用买量越来越难，APP增长的新机遇在哪里？

移动应用买量越来越难，APP增长的新机遇在哪里？

近两年来&#xff0c;“买量越来越难”是移动互联网每逢年末的固定趋势&#xff0c;“内卷”对于每一个互联网运营人来说成为了越来越普遍的存在。 比如在游戏买量领域&#xff0c;一家厂商做出一个素材之后&#xff0c;很多家都会陆续跟进。其次&#xff0c;素材的生命周期下…
阅读更多...
uniapp vue2、vue3 页面模板代码块设置

uniapp vue2、vue3 页面模板代码块设置

本文分享 uniapp vue2、vue3 页面模板代码块设置 设置路径 HBuilder X -> 工具 -> 代码块设置 -> vue代码块 -> 自定义代码块 如上图操作后在打开的 vue.json 文件的右侧“自定义代码块”中复制如下代码&#xff08;可全选替换也可添加到代码中&#xff09; 示…
阅读更多...
将CSDN或Confluence文章转为微信公众号格式

将CSDN或Confluence文章转为微信公众号格式

最近在更公众号文章&#xff0c;苦于排版和格式&#xff0c;就找了一个比较方便的方法&#xff0c;简单易用&#xff0c;排版也不错。 文章提取 有的文章是已经发布在其它平台了&#xff0c;比如CSDN或Confluence&#xff0c;可以使用飞书剪存方便的将文章提取出来&#xff0…
阅读更多...
Android Studio模拟器/虚拟设备连接互联网的方法

Android Studio模拟器/虚拟设备连接互联网的方法

如图&#xff0c;无线、网络都无法联网 找到本机的DNS 找到emu-launch-params.txt&#xff0c;添加DNS -dns-server 192.168.124.1 重启虚拟机&#xff0c;关闭无线
阅读更多...
[AutoSAR系列] 1.3 AutoSar 架构

[AutoSAR系列] 1.3 AutoSar 架构

依AutoSAR及经验辛苦整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入浅出AutoSAR》 1. 整体架构 ​ 图片来源&#xff1a; AutoSar 官网 从官往图中可以看出autosar作为汽车ECU软件架构&#xff0c;是通过分层来实现软硬件隔离。就像大多数操作系统一样&#xff…
阅读更多...
网络安全—自学笔记

网络安全—自学笔记

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…
阅读更多...
Spring Boot中RedisTemplate的使用

Spring Boot中RedisTemplate的使用

当前Spring Boot的版本为2.7.6&#xff0c;在使用RedisTemplate之前我们需要在pom.xml中引入下述依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><vers…
阅读更多...
基于SSM的幼儿园管理系统

基于SSM的幼儿园管理系统

基于SSM的幼儿园管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 管理员界面 摘要 基于SSM&#xff08;Spring、Spring MVC、MyBatis&#…
阅读更多...
IDEA: 自用主题及字体搭配推荐

IDEA: 自用主题及字体搭配推荐

文章目录 1. 字体设置推荐2. 主题推荐3. Rainbow Brackets(彩虹括号)4. 设置背景图片 下面是我的 IDEA 主题和字体&#xff0c;它们的搭配效果如下&#xff1a; 1. 字体设置推荐 在使用 IntelliJ IDEA 进行编码和开发时&#xff0c;一个合适的字体设置可以提高你的工作效率和舒…
阅读更多...
Fabric.js 图案笔刷

Fabric.js 图案笔刷

本文简介 带尬猴&#xff0c;我是德育处主任 Fabric.js 有图案画笔功能&#xff0c;这个功能可以简单理解成“刮刮卡”效果。 如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用。 本文将讲解如何配置这款画笔的基础属性。 图案画笔&#xff08;笔…
阅读更多...
Kafka入门05——基础知识

Kafka入门05——基础知识

目录 副本数据同步原理 HW和LEO的更新流程 第一种情况 第二种情况 数据丢失的情况 解决方案 Leader副本的选举过程 日志清除策略和压缩策略 日志清除策略 日志压缩策略 Kafka存储手段 零拷贝&#xff08;Zero-Copy&#xff09; 页缓存&#xff08;Page Cache&…
阅读更多...
关于JAVA中字节码文件版本号、产品版本号及开发版本号的关系

关于JAVA中字节码文件版本号、产品版本号及开发版本号的关系

目录 关于字节码版本对应关系清单关于字节码格式说明的资料关于这些版本号 关于字节码版本 以二进制打开字节码文件&#xff1a; 如上图中第5-8标识&#xff08;圈起来的&#xff09;的即字节码版本号 十六进制&#xff1a; 34 十进制&#xff1a; 52 jdk 8 对应关系清单 …
阅读更多...
四、【常用的几种抠图方式三】

四、【常用的几种抠图方式三】

文章目录 钢笔工具抠图通道抠图蒙版抠图色彩范围抠图 钢笔工具抠图 钢笔工具抠图适合边缘比较硬的主体对象&#xff0c;因此适合需要精修而且边缘比较生硬的图片&#xff0c;钢笔工具操作比较多&#xff0c;对一般的新手来讲不是很友好&#xff0c;想要使用好钢笔工具需要经常…
阅读更多...
5G与医疗：开启医疗技术的新篇章

5G与医疗：开启医疗技术的新篇章

5G与医疗&#xff1a;开启医疗技术的新篇章 随着5G技术的快速发展和普及&#xff0c;它已经在医疗领域产生了深远的影响。5G技术为医疗行业提供了更高效、更准确、更及时的通信方式&#xff0c;从而改变了医疗服务的模式和患者的体验。本文将探讨5G技术在医疗领域的应用场景、优…
阅读更多...
JS问题：项目中如何区分使用防抖或节流？

JS问题：项目中如何区分使用防抖或节流？

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约2300字&#xff0c;整篇阅读大约需要6分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …
阅读更多...
CSS 基础知识-02

CSS 基础知识-02

CSS 基础知识-01 1. flex布局2.定位3.CSS精灵4.CSS修饰属性 1. flex布局 2.定位 3.CSS精灵 4.CSS修饰属性
阅读更多...
[③ADRV902x]: Digital Filter Configuration(接收端)

[③ADRV902x]: Digital Filter Configuration(接收端)

前言 本篇博客主要总结了ADRV9029 Rx接收端链路中各个滤波器的配置。配置不同的滤波器系数以及不同的参数&#xff0c;可以对输入的数字信号灵活得做decimation处理&#xff0c;decimation信号抽取&#xff0c;就是降低信号采样率的过程。 Receiver Signal Path 下图为接收端…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023