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, ...
随机推荐
- [案例分析] 政务云市场面临的复杂格局——重庆政务云模式的启示:多厂商竞争化、PaaS 化
新闻背景: 2019 年 9 月底,重庆市大数据应用发展管理局发布政务云平台采购公告,预算金额为 5000 万元,以上 4 家入选. 最终项目被项目被阿里云.腾讯云.华为云.紫光云 4 家瓜分. 50 ...
- Intellij IDEA 常用的插件 建议全装
介绍几个常用的插件 Alibaba Java Coding Guidelines https://plugins.jetbrains.com/plugin/10046-alibaba-java-cod ...
- JVM 垃圾收集与内存分配
判断对象是否还活着 引用计数法 给对象添加引用计数器,添加加1,引用失效减1,如果为0就是不可使用的.问题是不能解决互相引用带来的问题 可达性分析法 以GC Roots为起点,判断到一个对象是否有引用 ...
- .Net轻量状态机Stateless的简单应用
对于大部分系统中流程的变更,是十分正常的事情,小到一个状态的切换,大到整个系统都是围绕业务流再走,复杂点的有工作流引擎,简单点的几个if/else收工,但是往往有那种,心有余而力不足的,比简单复杂,比 ...
- java中的Static、final、Static final各种用法详解
前言 对Static.final.Static final这几个关键词熟悉又陌生?想说却又不知怎么准确说出口?好的,本篇博客文章将简短概要出他们之间的各自的使用,希望各位要是被你的面试官问到了,也能从 ...
- node留言板
这是一个nodejs + mongodb 的小项目,对数据库的增删改查 1. 引入项目依赖 "art-template": "^4.13.2", "b ...
- pytest -- 中文文档
pytest-chinese-doc pytest官方文档(5.1.3版本)的中文翻译,但不仅仅是简单的翻译: 更多的例子,尽量做到每一知识点都有例子: 更多的拓展阅读,部分章节添加了作者学习时,所查 ...
- Git学习笔记----基础运用
安装Git Windows: 进入官网下载或百度网盘下载 Git(V2.23_x64) 提取码:uf2x Ubuntu: sudo apt-get -install git 安装完成之后打开git命令 ...
- 使用position设置经典的网站前端结构
能脱离文档流的设置: float:left/right position:absolute; 绝对定位 position:fixed; 固定定位 //搞清楚position的属性值的意思就容易明白 使 ...
- 放棋子:组合数/dp/容斥原理
题目传送门 啊又是一个考场上没拿到的水题,差一步!! 组合数,先打个杨辉三角吧. 显然棋子应该一种一种的放,这很dp. 而且棋子一旦放下,那么它所在的行列就只能放这种颜色的棋子了. 设dp[i][x] ...