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案例中的客户端…

【SA8295P 源码分析 (二)】64 - QNX 与 Android GVM 显示 Dump 图片方法汇总

【SA8295P 源码分析】64 - QNX 与 Android GVM 显示 Dump 图片方法汇总 一、QNX侧1.1 surfacedump 功能1.2 screenshot 功能二、Android GVM 侧2.1 screencap -p 导出 PNG 图片2.2 screencap 不加 -p 参数,导出 RGB32 图片2.3 dumpsys SurfaceFlinger --display-id 方法系列文…

php获取农历日期节日

代码地址&#xff1a;php获取农历日期节日-遇见你与你分享 <?php $c new DayService(); $today$c->convertSolarToLunar(date(Y),date(m),date(d)); $time "农历".$today[1].$today[2]."日";class DayService {var $MIN_YEAR 1891;var $MAX_YEAR …

mac电脑zsh: command not found: adb

“zsh: command not found: adb” 的解决方法&#xff1a; 前提 已经成功安装了 Android Studio. 打开 iTerm 终端依次输入下面命令&#xff1a; echo export ANDROID_HOME/Users/$USER/Library/Android/sdk >> ~/.zshrc echo export PATH${PATH}:$ANDROID_HOME/tool…

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) 序&…

【SA8295P 源码分析 (二)】66 - Android 侧内核层 TouchScreen Panel(TP)触摸屏驱动源码分析

【SA8295P 源码分析】66 - Android 侧内核层 TouchScreen Panel(TP)触摸屏驱动源码分析 一、在 Shell 中查看 input 设备信息命令1.1 获取QNX 端虚拟化过去的 input 设备:cat /mnt/vm/images/linux-la.config1.2 获取 Android 端 input 设备信息:getevent -i1.3 获取 Andro…

ARJ_DenseNet BMR模型训练

废话不多数&#xff0c;模型训练代码 densenet_arj_BMR.py &#xff1a; import timefrom tensorflow.keras.applications.xception import Xception from tensorflow.keras.applications.densenet import DenseNet169 from tensorflow.keras.preprocessing.image import Im…

电脑桌面记事本便签软件哪个好?

很多人的电脑或者手机上都离不开一款好用的便签软件&#xff0c;使用便签软件可以帮助大家记事&#xff0c;提醒大家按时完成各项任务&#xff0c;但是自带的记事本便签软件不论从外观还是功能方面都有一定的欠缺&#xff0c;在使用过程中很容易耽误事情。 功能全面外观好看的…

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.…