React antd Table表格动态合并单元格

注意:

① 采用的是React antDsign 4.x版本 

② 需重新处理data数据

实现效果

代码实现

import React from 'react';
import { Table } from 'antd';const data = [{key: '0',name: '张三',age: 22,sex: '男',},{key: '1',name: '李四',age: 42,sex: '男',},{key: '2',name: '小丽',age: 22,sex: '女',},{key: '3',name: '小红',age: 31,sex: '女',},{key: '4',name: '赵大胆',age: 42,sex: '男',},{key: '5',name: '李建国',age: 62,sex: '男',},
];const columns = [{title: '姓名',dataIndex: 'name',key: 'name',align: 'center',},{title: '性别',dataIndex: 'sex',key: 'sex',align: 'center',render(_, row) {return {children: row.sex,props: {rowSpan: row.rowSpan,},};},},{title: '年龄',dataIndex: 'age',key: 'age',align: 'center',},
];//处理data数组
const createNewData = (data) => {return data.reduce((result, item) => {if (result.indexOf(item.sex) < 0) {result.push(item.sex);}return result;}, []).reduce((result, sex) => {const children = data.filter((item) => item.sex === sex);result = result.concat(children.map((item, index) => ({...item,rowSpan: index === 0 ? children.length : 0,})),);return result;}, []);
};const App = () => (<Tablecolumns={columns}dataSource={createNewData(data)}borderedsize="small"/>
);export default App;

注:本人前端小白 ,如有不对的地方还请多多指教

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

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

相关文章

yolo V8训练 长条状目标

1、说明 目标数据集合中有很多长条状图片&#xff0c;如果直接Resize 会严重拉伸&#xff0c;因此采用把长条图像裁剪成2段&#xff0c;然后将裁剪后的2段图片拼接在一起。 2、代码 2.1 C 代码 &#xff08;部署&#xff0c;模型推理时C &#xff09; #include <stdio.h…

ML307R_APP_DEMO_SDK TCP/UDP使用介绍

ML307R_APP_DEMO_SDK是在ML307R_OpenCPU_Standard_SDK标准代码基础上&#xff0c;新增了面向用户APP层的demo示例&#xff0c;与标准代码中examples的示例代码不同&#xff0c;app_demo实现了联网自动化&#xff0c;数据透传&#xff0c;各功能可独立自动运行&#xff0c;并对用…

【Oracle点滴积累】解决ORA-29913和KUP-04095: preprocessor command的方法

广告位招租&#xff01; 知识无价&#xff0c;人有情&#xff0c;无偿分享知识&#xff0c;希望本条信息对你有用&#xff01; 今天和大家分享ORA-29913: error in executing ODCIEXTTABLEFETCH callout和KUP-04095: preprocessor command错误的解决方法&#xff0c;本文仅供参…

ArcGIS Pro基础:如何将数据和引用地图样式一起打包分享

如上所示&#xff0c;有2个矢量图斑&#xff0c;一个是耕地地块&#xff0c;另一个是范围图斑&#xff0c;如果我们需要把此工程的所有数据以及引用地图一起分享给别人&#xff0c;就可以使用【打包工程】这个工具。 如上所示&#xff0c;在【地理处理】下输入【打包工程】&am…

AI绘画【SD教程】进阶篇,文生图复现金克斯动漫形象,用AnimateDiff动画插件让她动起来!AI动画教程建议收藏

大家好&#xff0c;我是画画的小强 当你成功安装了AI绘画工具 SD&#xff08;Stable Diffusion&#xff09;后&#xff0c;是否也产生过这样的疑惑&#xff1a;为何我创作的图片与他人的作品在风格和质量上存在差异&#xff1f; 实际上&#xff0c;在AI绘画的领域中&#xff…

java-3 多态

什么是多态 对象多态&#xff0c;行为多态 方法&#xff1a;编译看左边&#xff0c;运行看右边 变量&#xff1a;编译运行都看左 为什么呢&#xff1f; 多态强调的是对象多态和行为多态&#xff0c;可没说变量多态 使用多态的好处 编译看左边&#xff0c;不能调用子类独有的…

景联文科技高质量文本标注:驱动自然语言处理技术的发展与应用

文本标注是自然语言处理&#xff08;NLP&#xff09;领域的一个重要环节&#xff0c;是指在文本数据上添加额外的信息或标记的过程&#xff0c;目的是为了让计算机能够理解和处理这些文本数据。 通过文本标注&#xff0c;可以为文本中的各个部分提供具体的含义和上下文信息&…

谷粒商城篇章11--P311-P325--秒杀服务【分布式高级篇八】

目录 1 后台添加秒杀商品 1.1 配置优惠券服务网关 1.2 添加秒杀场次 1.3 上架秒杀商品 2 定时任务 2.1 cron 表达式 2.2 cron表达式特殊字符 2.3 cron示例 3 秒杀服务 3.1 创建秒杀服务模块 3.1.1 pom.xml 3.1.2 application.yml配置 3.1.3 bootstrap.yml配置 3.…

HT97180 125mW免输出耦合电容的立体声线路驱动器1耳机放大器

特点 输出无需隔直流电容 卓越的低音效果 无咔嗒/噼噗声 低THDN:最低0.002% 低噪声&#xff0c;VN:8uV 支持单端输入和全差分输入 1.65V至4.8V较宽的电源工作范围 输出功率:125mW(fIN1kHz,VDD4.2V RL32Ω,THDN0.1%) 无铅封装, QFN16L-PP 3mm*3mm 概述 HT97180(L)是一款差分…

line-height的使用场景

line-height:字面含义为行高&#xff0c;行高有三部分组成&#xff0c;分为内容高度&#xff0c;上间距&#xff0c;下间距。 可以看到文本在div盒子中的默认位置是左上角。此时文字部分的行高只有内容高度在支撑&#xff0c;上间距和下间距都是0。鼠标在字体上滑动时的蓝色部…

超融合/分布式 IT 架构有哪些常见故障类型?如何针对性解决和预防?

本文刊于《中国金融电脑》2024 年第 7 期。 作者&#xff1a;SmartX 金融团队 以超融合为代表的分布式 IT 基础架构凭借其高性能、高可靠和灵活的扩展能力&#xff0c;在满足大规模、高并发、低延迟业务需求等方面展现出显著优势&#xff0c;成为众多金融机构构建 IT 基础设施…

初识模版(C++)

初识模版&#xff08;C&#xff09; 模版是C的一个重大发明&#xff0c;是让C突飞猛进的原因之一。 泛型编程 实现一个通用的交换函数&#xff1f; void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, doubl…

DockerHub解决镜像拉取之困

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

从零开始搭建Aliyun ESC高可用集群 (HaVip+KeepAlived)

从零开始搭建Aliyun ESC高可用集群 (HaVip+KeepAlived) 架构 架构 本设计方案采用两台阿里云ECS服务器搭建Keepalived结合LVS的高可用集群。使用LVS的TUN模式进行负载均衡,同时利用阿里云的弹性IP(EIP)与高可用虚拟HaVIP实现跨服务器的高可用性。架构中,一台ECS服务器作为…

DFS 算法:记忆化搜索

我的个人主页 {\large \mathsf{{\color{Red} 我的个人主页} } } 我的个人主页 往 {\color{Red} {\Huge 往} } 往 期 {\color{Green} {\Huge 期} } 期 文 {\color{Blue} {\Huge 文} } 文 章 {\color{Orange} {\Huge 章}} 章 无 此系列更新频繁&#xff0c;求各位读者点赞 关…

备考计算机二级Python之Day5

第5章 函数和代码 一、函数的基本使用 函数是一段具有特定功能的、可重用的语句组&#xff0c;通过函数名来表示和调用。 函数的使用包括两部分&#xff1a;函数的定义和函数的使用 1、函数的定义 Python语言通过保留字def定义函数&#xff0c;语法形式如下&#xff1a; …

SpringBoot教程(二十四) | SpringBoot集成AOP实现日志记录

SpringBoot教程&#xff08;二十四&#xff09; | SpringBoot集成AOP实现日志记录 &#xff08;一&#xff09;AOP 概要1. 什么是 AOP &#xff1f;2. 为什么要用 AOP&#xff1f;3. AOP一般用来干什么&#xff1f;4. AOP 的核心概念 &#xff08;二&#xff09;Spring AOP1. 简…

CSS3页面布局-三栏-中栏流动布局

三栏-中栏流动布局 用负外边距实现 实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位&#xff0c; 并在中栏内容区大小改变时控制右栏与布局的关系。 控制两个外包装容器的外边距&#xff0c;一个包围三栏&#xff0c;一个包围左栏和中栏。 <!DOCTYPE html&…

vllm 部署GLM4模型进行 Zero-Shot 文本分类实验,让大模型给出分类原因,准确率可提高6%

文章目录 简介数据集实验设置数据集转换模型推理评估 简介 本文记录了使用 vllm 部署 GLM4-9B-Chat 模型进行 Zero-Shot 文本分类的实验过程与结果。通过对 AG_News 数据集的测试&#xff0c;研究发现大模型在直接进行分类时的准确率为 77%。然而&#xff0c;让模型给出分类原…

【软件测试面试题】WEB功能测试(持续更新)

Hi&#xff0c;大家好&#xff0c;我是小码哥。最近很多朋友都在说今年的互联网行情不好&#xff0c;面试很难&#xff0c;不知道怎么复习&#xff0c;我最近总结了一份在软件测试面试中比较常见的WEB功能测试面试面试题合集&#xff0c;希望对大家有帮助。 建议点赞收藏再阅读…