springboot + antdesign前后端分离中，自定义表头 动态表格样式设置(UserVo -＞ List＜UserColumn＞)

已于 2022-07-17 21:11:25 修改
阅读量1.1k 收藏
点赞数
分类专栏： springboot antd 文章标签： 前端 javascript 开发语言
于 2022-07-17 20:13:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44079262/article/details/125836230
版权
  1. 以前的表格是怎么展示的
    回忆一下，引入前后端分离后，前端负责用antd写好表头和样式，数据直接从后端取过来展示。
    这种写法表格列的宽度等属性都在前端页面里写死，要修改很不方便，我们可以把宽度等属性定义在后端里，前端拿数据直接把一套全拿走， 譬如说本来你要拿一个user对象，现在我不给你user了，我给你list，每个元素是一个user属性值加上它所占列的属性，比如name,name这个里面就可以加入一个width，加入对齐方式
    使用后端经管表头数据，最大的好处就是不用重新部署，直接后台写一个接口来改变这些表数据，实现动态改变表格

2.如何做到这个功能
其实很简单，只需要定义一个转换方法，按上面的思路来转换你原有的user对象。
之后，你仍然从dao查出数据，但不是马上层层返回给前端了，而是马上去调用转换方法，产生一个column的列表，之后，把他返回给前端。

3、代码实现
首先说明一下，我采用的是antd前端框架，其他框架同理，
在这里插入图片描述

暂停买饭，有空了继续写，代码和实细节一一记录

敢问肥撒何方
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
springboot动态建立表、修改表结构、删除表工具
2401_84002448的博客
04-12 901
说句实话，如果一个打工人不想提升自己，那便没有工作的意义，毕竟大家也没有到养老的年龄。当你的技术在一步步贴近阿里p7水平的时候，毫无疑问你的薪资肯定会涨，同时你能学到更多更深的技术，交结到更厉害的大牛。推荐一份Java架构之路必备的学习笔记，内容相当全面！！！成年人的世界没有容易二字，前段时间刷抖音看到一个程序员连着加班两星期到半夜2点的视频。在这个行业若想要拿高薪除了提高硬实力别无他法。你知道吗？现在有的应届生实习薪资都已经赶超开发5年的程序员了，实习薪资26K，30K，你没有紧迫感吗？
基于springboot的Web报表工具，支持各种数据源
MMKJSH的博客
06-08 466
支持MySQL,Oracle,SQLServer,HBase。基于springboot的Web报表工具，支持各种数据源。支持维度筛选、日期筛选。支持报表Excel导出。支持定时任务配置管理。
使用 Ant Design Vue 实现动态表头与数据填充
最新发布
Programming Talk
06-04 782
通过可以自定义单元格内容的渲染方式。例如，我们可以为某些字段添加链接或按钮。title: '操作',});在<template><a-button @click="handleEdit(record)">编辑</a-button></a-table><script>props: {data: {},data() {return {},watch: {data: {},deep: true},methods: {});});
Springboot+mybatis+jsp+mvc中表格排序的笔记
10-19
Spring的基础入门知识笔记整合mybatis和jsp的一些内容包括
SpringBoot2+Ant Design实战班
08-11
该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Ant Design Pro Vue+可视化AntV 等技术栈开发的项目，采用多模块前后端分离开发。包括图形展示、权限管理、用户管理等功能，用于研发企业级中后台产品。 【后端技术】技术 说明Spring Boot2 MVC框架 开发的一站式解决方案Spring Security5  认证和授权框架MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架MyBatisCode工具 生成 MyBatis 相关代码Jackson 提供了处理 JSON 数据的工具Lombok 简化对象封装工具 Druid   数据库连接池 【前端技术】Vue        互联网最火的前端框架Vue Router 路由框架Vuex 全局状态管理框架Axios 前端 HTTP 框架Element UI 前端 UI 框架Ant Design Pro Vue 前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV主要用于研发企业级中后台产品。特性提炼自企业级中后台产品的交互语言和视觉风格。使用 TypeScript 开发，提供完整的类型定义文件。 链路开发和设计工具体系。【开发工具】IntelliJ IDEA 开发 IDESQLyog 数据库连接客户端Postman HTTP 请求工具【开发环境】工具 版本JDK 1.8MySQL 5.7
antd 表格设置动态列（动态表头）
热门推荐
agua001的博客
01-19 1万+
1、需求：勾选中某个项，表格就展示对应的数据，反之则不显示 2、表格的 columns 动态赋值（刚开始默认全部不展示） html: <div class="checkBox"> <a-checkbox @change="changeData" :checked="dataRate"> 数据传输完整率 </a-checkbox> <a-checkbox @change="changeTimely" :checked="timelyRate"
无代码动态表单系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
Designer 小郑的技术博客
10-04 880
基于Vue+SpringBoot+MySQL的无代码平台的表单平台，包括了系统数据中心模块，用来存放管理系统通用的模块，另外分别设计了动态类型模块、动态文件模块、动态字段模块和动态值模块这四大模块，用于实现档案管理系统的核心表单逻辑。
Mybatis中输入输出映射与动态Sql图文详解
08-26
Mybatis中输入输出映射与动态Sql图文详解 Mybatis是一种非常流行的持久层框架，用于数据库交互操作。在Mybatis中，输入输出映射和动态Sql是两个非常重要的概念。输入输出映射是指在Mybatis中将输入参数与输出结果...
SpringBoot登录拦截配置详解(实测可用)
08-18
SpringBoot登录拦截配置详解 SpringBoot登录拦截配置详解是指在SpringBoot应用程序中实现登录拦截的配置过程。登录拦截是指在用户请求资源之前，检查用户是否已经登录，如果未登录，则抛出异常，提示用户登录。这种...
springboot的入门学习
11-23
SpringBoot的入门学习 SpringBoot是由Pivotal团队开发的一个框架，它旨在简化Spring应用程序的初始搭建以及开发过程。SpringBoot通过"约定优于配置"的原则，使得开发者能够快速地创建一个独立运行的、生产级别的...
java导出数据库中Excel表格数据的方法
08-29
public final static String exportExcel(String fileName, String[] title, List<UserVO> listContent, HttpServletResponse response) { String result = "Excel 文件导出成功！"; try { OutputStream os = ...
spring-boot使用AOP统一处理日志
08-31
下面我们将详细讨论如何在Spring Boot中设置AOP来处理日志。 首先，我们需要在项目的`pom.xml`文件中引入AOP相关的依赖。对于Spring Boot项目，我们可以添加`spring-boot-starter-aop`来启用AOP支持，同时为了方便...
java 在springboot中使用freemarker动态生成html表格,给我一个示例
weixin_35756373的博客
02-15 518
当使用 Spring Boot 和 FreeMarker 来生成动态 HTML 表格时，您需要在项目的依赖中添加 FreeMarker 的库以及 Spring Boot 的 Web 模块库。在完成这些步骤后，您可以按照以下示例来使用 FreeMarker 生成 HTML 表格。 首先，您需要创建一个数据模型类，表示您要在表格中呈现的数据： public class Person { pri...
springboot之easyexcel处理excel表格
weixin_53472653的博客
02-06 1334
1.添加依赖 <dependencies> <!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel --> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId>
elementui表格自定义表头的两种方法
weixin_70245286的博客
09-04 3744
这篇文章总结了elementui组件自定义表头的方法，因为自己在开发中遇到了坑，就总结一下
springboot-mybatis动态操作表格
陆沙的博客
05-26 780
问题描述 在我的项目里，需要： 根据名称查找表格，判断表格是否存在； 动态创建表格； 删除表格； 修改表格的engine； 使用load data快速导入大量数据； 分组统计数据并存入指定对象中。 为了解决这些问题，我单独写了一个TableDao，将表格相关的操作放在一起。以下仅给出示例。 解决方案 1.根据名称查找表格 TableDao.java /** * 查找prefix开头的表名 * @param prefix {@code String} * @return */ List<St
springboot+vue动态字段，动态列表显示
百尺竿头
06-09 2805
1、后台代码片段： @GetMapping("tableList") public R tableList(String tableName) { //startPage(); Map<String, Object> params = new HashMap<>(); params.put("tableName", tableName); params.put("fields", "*"); params.put("page", getRequest(
构建高效的码匠管理系统：React 18.X、Ant Design 和 Spring Boot 3.1.5 开发回顾
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
11-20 255
本文将深入探讨基于先进技术栈的码匠管理系统开发过程。利用React 18.X作为前端框架、Ant Design提供的UI组件库以及Spring Boot 3.1.5的后端支持，我们打造了一个功能强大、高效的码匠管理平台。本文将详细介绍该系统的技术栈、功能模块、开发环境以及总结经验与挑战。
createUserVoList.stream().collect(Collectors.toMap(UserVO::getId, userVO -> userVO));
05-26
这段代码是使用 Java 8 中的 Stream API 对 List 中的元素进行处理，并将处理结果转换为一个 Map 对象。 具体来说，`createUserVoList` 是一个 List<UserVO> 类型的对象，表示一组用户信息。`UserVO` 是一个自定义的类，包含了用户的各种属性，比如 id、name、age 等等。 该代码使用了 Stream 的 `collect` 方法，将 List 中的每个 UserVO 对象都转换为一个 Map.Entry 对象，其中 key 是 UserVO 对象的 id 属性，value 是 UserVO 对象本身。具体实现是通过 `Collectors.toMap` 静态方法实现的，其中 `UserVO::getId` 表示使用 UserVO 对象的 id 属性作为 Map 的 key，`userVO -> userVO` 则表示使用 UserVO 对象本身作为 Map 的 value。 最终的结果是一个 Map<Integer, UserVO> 对象，其中 Integer 类型的 key 表示 UserVO 对象的 id 属性，UserVO 类型的 value 表示对应的用户信息。这样可以方便快速地根据用户 id 查找对应的用户信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值