react实现一维表格、键值对数据表格key value表格

UI画的需求很抽象,直接把数据铺开,不能直接用antd组件了

上一行是name,下一行是value,总数不定,最后前端还要显示求和

class OneDimensionTable extends React.Component {  render() {const { data } = this.props;let total = 0;data.map(item => total+=item.value);const tableData = [...data, {name: '合计', value: total}];const row = Math.trunc(tableData.length % 5 == 0 ? tableData.length/5 : tableData.length/5+1); //一行5个,可以改return (<table style={{border:'1px solid #1890ffd0', color:'white', fontSize: 12, width: 540}}><tbody>{[...Array(row)].map((v, i) => (<><tr>{[...Array(5)].map((value,index)=><td style={{paddingTop: 10, paddingBottom: 10, textAlign: 'center', backgroundColor: 'rgb(29,124,237,0.2)'}}>{tableData[i*5+index]?.name}</td>)}                           </tr><tr>{[...Array(5)].map((value,index)=><td style={{paddingTop: 10, paddingBottom: 10, textAlign: 'center'}}>{tableData[i*5+index]?.value}</td>)}                           </tr></>))}</tbody></table>) }
};

使用:

<OneDimensionTable data={data}></OneDimensionTable>

(我所说的一维:表格都是二维的,数据在纵横两个方向上应当都有意义,但本需求数据只在一个方向上有意义,所以我直接叫它一维表格了)

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

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

相关文章

Linux安装node_exporter使用grafana进行服务器监控

文章目录 linux安装node_exporter修改node_exporter端口服务器安装grafana服务器安装prometheus将linux的noe_exporter配置到prometheus配置文件中导入linux服务器的模板,id: 16098常用exporter安装下载 linux安装node_exporter 要在CentOS 7.6.1810 (Core)上安装node_exporte…

网安顶刊IEEE Transactions on Dependable and Secure Computing

安全顶刊论文列表 写在最前面IEEE Transactions on Dependable and Secure ComputingTable of Contents&#xff08;March-April 2023&#xff09;Volume 20, Issue 2Table of Contents&#xff08;Sept.-Oct. 2023&#xff09;Volume 20, Issue 5 写在最前面 为了给自己找论文…

2023_Spark_实验十九:SparkStreaming入门案例

SparkStreaming入门案例 一、准备工作 二、任务分析 三、官网案例 四、开发NetWordCount 一、准备工作 实验环境&#xff1a;netcat 安装nc&#xff1a;yum install -y nc 二、任务分析 将nc作为服务器端&#xff0c;用户产生数据&#xff1b;启动sparkstreaming案例中的客户端…

NIO IN:技术蔚来的首次「大阅兵」

宝山&#xff0c;上海第一钢铁厂旧址。 上周&#xff0c;蔚来在这里点亮金色炉台&#xff0c;2500 立方米高炉&#xff0c;浓重的工业气质与古典凝重的光影交织&#xff0c;蔚来 NIO IN 用科技的进步呼应那个火红的年代。 这是蔚来第一次开科技发布会&#xff0c;为了全方位展…

通过内网穿透快速搭建公网可访问的Spring Boot接口调试环境

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言 、Cpolar、Linux ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 …

通讯协议学习之路:RS485协议理论

通讯协议之路主要分为两部分&#xff0c;第一部分从理论上面讲解各类协议的通讯原理以及通讯格式&#xff0c;第二部分从具体运用上讲解各类通讯协议的具体应用方法。 后续文章会同时发表在个人博客(jason1016.club)、CSDN&#xff1b;视频会发布在bilibili(UID:399951374) 序&…

HTTP 协议的基本格式(部分)

要想了解HTTP&#xff0c;得先知道什么是HTTP&#xff0c;那么HTTP是什么呢&#xff1f;HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议。那什么是超文本呢&#xff1f;那就是除了文本&#xff0c;还有图片&#xff0c;声音&#xff0c;视频等。 …

『C++成长记』C++入门——命名空间缺省参数

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、C的认识 &#x1f4d2;1.1什么是C &#x1f4d2;1.2C的发展 二、C关键字 三…

论文阅读之《Kindling the Darkness: A Practical Low-light Image Enhancer》

目录 摘要 介绍 已有方法回顾 普通方法 基于亮度的方法 基于深度学习的方法 基于图像去噪的方法 提出的方法 2.1 Layer Decomposition Net 2.2 Reflectance Restoration Net 2.3 Illumination Adjustment Net 实验结果 总结 Kindling the Darkness: A Practical L…

轮转数组------题解报告

题目&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题解&#xff1a; 如果直接暴力双循环会时间超限&#xff0c;所以我选择了一个空间复杂度比较高的方法。直接再创建一个数组&#xff0c;然后对应位置替换&#xff0c;最后把值赋给原…

Spring framework Day24:定时任务

前言 在我们的日常生活和工作中&#xff0c;时间管理是一项至关重要的技能。随着各种复杂任务的增加和时间压力的不断增加&#xff0c;如何更好地分配和利用时间成为了一项迫切需要解决的问题。在这样的背景下&#xff0c;定时任务成为了一种非常有效的解决方案。 定时任务&a…

Kubernetes技术与架构-服务

从软件系统架构设计分层的角度看&#xff0c;Kubernetes的Service是基于Pod的上层&#xff0c;业务应用部署在Pod中&#xff0c;使用Service绑定Pod部署的应用&#xff0c;Service可以对外或者对上层提供服务&#xff0c;当Pod集群在系统调度的过程中发生弹性伸缩的时候&#x…

Python中的With ...as... 作用

Python中的with … as …作用&#xff1a; 1、通过with语句可以得到一个上下文管理器 2、执行对象 3、加载__enter__方法 4、加载__exit__方法 5、执行__enter__方法 6、as 可以得到enter的返回值 7、拿到对象执行相关操作 8、执行完了之后调用__exit__方法 9、如果遇到异常&a…

1024程序员节特辑 | ELK+ 用户画像构建个性化推荐引擎,智能实现“千人千面”

专栏集锦&#xff0c;赶紧收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https://blog.…

易点易动上线招标管理模块:提升企业高效招标管理的解决方案

在当今竞争激烈的商业环境下&#xff0c;招标管理对于企业的成功至关重要。为了帮助企业实现高效的招标管理&#xff0c;易点易动固定资产管理系统上线了全新的招标管理模块。该模块涵盖了供应商资质审核、采购询价单、重新报价单、招标结果单、招标作废单等功能&#xff0c;为…

10月份stable diffusion animatediff等插件使用指南,又来更新了

插件一直会更新&#xff0c;包含了基本市面上流行的90%插件&#xff0c;好用的插件更是不会错过&#xff0c;往期插件请看往期文章&#xff0c;如果你没有时间一直关注sd更新的进展&#xff0c;请关注我&#xff0c;一个月用几个小时看一下我的文章&#xff0c;最短时间跟进sd。…

【微服务】spring webflux响应式编程使用详解

目录 一、webflux介绍 1.1 什么是webflux 1.2 什么是响应式编程 1.3 webflux特点 二、Java9中响应式编程 2.1 定义事件流源 2.2 实现订阅者 三、Spring Webflux介绍 四、Reactor 介绍 五、Reactor 常用API操作 5.1 Flux 创建流操作API 5.2 Flux响应流的订阅 5.3 Fl…

Mybatis对数据库进行增删查改以及单元测试

这篇写的草率了&#xff0c;是好几天前学到&#xff0c;以后用来自己复习 UserInfo import lombok.Data;Data public class UserInfo {private int id;private String name;private int age;private String email;//LocalDateTime可用于接收 时间}Mapper UserMapper pack…

2023年中国多功能折叠刀产量、销量及市场规模分析[图]

多功能折叠刀是一种集多种功能于一身的刀具&#xff0c;通常包括切割、开瓶、剥皮、锯木等功能&#xff0c;可以通过折叠和展开的方式来实现不同的功能&#xff0c;具有便携、多用途、安全等特点&#xff0c;广泛应用于户外探险、露营、自驾旅行等场景。 多功能折叠刀行业分类…

Simian使用方法

1.下载 链接1&#xff1a;官网下载 链接2&#xff1a;压缩包 2.操作 1.双击exe启动 2.打开控制台&#xff0c;winR 输入cmd 3.输入操作语句 G:\1111\simian-2.5.10\bin\simian-2.5.10.exe -includes"G:\1111\test\*.cpp" -threshold3 > output.txt G:\1111\si…