react antd Table动态合并单元格
示例数据
原始数组
const data = [
{
key: '0',
name: 'John Brown',
age:22,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '1',
name: 'John Brown',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '2',
name: 'John Brown',
age:22,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '5',
name: 'Joe Black',
age: 3,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
{
key: '6',
name: 'Joe Black',
age: 342,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
{
key: '7',
name: 'Joe Black',
age: 62,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
原始数据 使用Table展示如下
name是本文实例需要合并的字段
数据字段包括key``name``age``address``tags
等假数据,目的是实现将具有相同name
的元素合并为一个数组,然后将这些数组展开成为符合antd Table渲染条件的新数组,如下:
合并结果如下
合并单元格解决方案
合并函数
//合并数组单元格
createNewArr=(data)=>{
return data.reduce((result, item) => {
//首先将name字段作为新数组result取出
if (result.indexOf(item.name) < 0) {
result.push(item.name)
}
return result
}, []).reduce((result, name) => {
//将name相同的数据作为新数组取出,并在其内部添加新字段**rowSpan**
const children = data.filter(item => item.name === name);
result = result.concat(
children.map((item, index) => ({
...item,
rowSpan: index === 0 ? children.length : 0,//将第一行数据添加rowSpan字段
}))
)
return result;
}, [])
}
使用方法
const columns = [
{
title: '分类名称',
dataIndex: 'name',
key: 'name',
render(_, row) {
return {
children: row.name,
props: {
rowSpan: row.rowSpan,
}
}
}
},
]
//Table传入数据之前对数据做处理
<Table columns={columns} dataSource={this.createNewArr(data)}/>
作者:黄仕达
编辑人:苑百琦
Ps:引用请标明出处,感谢!
本文由博客一文多发平台 OpenWrite 发布!
react antd Table动态合并单元格的更多相关文章
- html table动态合并单元格 js方法
<script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...
- EasyUI-DataGrid动态合并单元格
js /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&qu ...
- JQuery EasyUI DataGrid动态合并单元格
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- css table之合并单元格
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
- JSP动态合并单元格
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table ...
- display:table表格合并单元格
直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- vue 动态合并单元格、并添加小计合计功能
1.效果图 2.后台返回数据格式(平铺式) 3.后台返回数据后,整理所需要展示的属性存储到(items)数组内 var obj = { "id": curItems[i].id, ...
随机推荐
- 百万年薪python之路 -- 内置函数练习
1.整理今天笔记,课上代码最少敲3遍. 2.用列表推导式做下列小题 过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 lst = [["a","b"],[ ...
- windows安装web服务器看这一篇就够了(Apache PHP MySQL)
本文将为您描述Windows Server Install Apache PHP MySQL(图文详解),Windows搭建web服务器(php+Apache+mysql) 的方法 环境准备: Win ...
- OptimalSolution(1)--递归和动态规划(3)数组和字符串问题
一.最长递增子序列(LIS) 给定数组arr,返回arr的最长递增子序列.例如,arr={2,1,5,3,6,4,8,9,7},返回的最长递增子序列为{1,3,4,5,8,9} 1.时间复杂度为O(N ...
- 2019年Unity学习资源指南[精心整理]
前言 进入一个领域,最直接有效的方法就是,寻找相关综述性文章,首先你需要对你入门的领域有个概括性的了解,这些包括: 1.主流的学习社区与网站. 2.该领域的知名大牛与热心分享的从业者. 3.如何有效的 ...
- 重磅!微软发布 Visual Studio Online:Web 版 VS Code + 云开发环境
北京时间 2019 年 11 月 4 日,在 Microsoft Ignite 2019 大会上,微软正式发布了 Visual Studio Online (VS Online)公开预览版! 如今发布 ...
- Spring Boot2 系列教程(二十)Spring Boot 整合JdbcTemplate 多数据源
多数据源配置也算是一个常见的开发需求,Spring 和 SpringBoot 中,对此都有相应的解决方案,不过一般来说,如果有多数据源的需求,我还是建议首选分布式数据库中间件 MyCat 去解决相关问 ...
- SpringBoot之集成MyBatis
引入工程依赖包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- Vue使用antV G2制作看板
工作中需要制作一个看板,选型选用antV G2进行开发. 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用. 1.安装antv/g2 npm install @antv/g2 --sa ...
- setAccessible()方法
在java代码中,我们经常使用private来控制类中成员变量的访问权限,在类的外边我们一般使用get方法获取私有成员变量的值,但是如果类中没有get方法,但我们又想获取该类私有成员变量的值,该怎么办 ...
- markdown 编辑器概述
markdown 编辑器概述 编辑器其实很多很多,主要分为 网页编辑和软件编辑 (效果其实感觉效果差不多,看个人喜好,笔者个人还是喜欢本地,感觉方便挺多的) ## 网页编辑器 主要有 C ...