程序地带

antd-Table中根据后台返回的数据--实现动态列合并--------- js实现


列合并方法


/*
* 参数text :为当前单元格的值 > string
*参数data :为当前table 渲染的数据 >数组
*参数key : 为当前单元格的dataindex> string
*参数index :为当前单元格的第几行 >Number
* 参数row :为table 当前行的数据对象 >Object
*/
const mergeCells=( text , data , key , index , row)=>{
//判断上一行该列数据是否相等;
//如果相等则该单元格被上一列合并,直接返回rowSpan为 0
if( index !==0 && (text === data[index - 1][key])){
return 0
}
let rowSpan=1;
for(let i = index + 1; i < data.length; i++){
//判断下一行是否相等 ;
if(text != data[i][key]){
break;
}else{
rowSpan++
}
}
return rowSpan;
}

调用:


import { Component } from 'react'
import { Table } from 'antd';
class MerageTable extends Component {
state={}
render(){
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
return {
children: <a>{text}</a>,
props: {
//调用方法
colSpan:mergeCells(texxt, this.props.data,'name' , index, row),
},
};
}},
{
title: 'Age',
dataIndex: 'age',
render: (text, row, index) => {
return {
children: <a>{text}</a>,
props: {
//调用方法
colSpan : mergeCells(texxt, this.props.data,'age' , index, row),
},
};
}},
]
return(
<Table columns={columns} dataSource={this.props.data} bordered />
)
}
}

上面的情况针对没有数据列中没有连续列的单元格值为null ,undefined 以及’ ',空字符串的情况下,效果图是基本没有问题的,但是一旦出现连续的上述三种情况,就会发现特殊值的单元格的合并就会出现问题:


问题

举个例子更清晰点。假如 :
第2行 与 第3行 的 第3列数据都为null ,第2行 和 第3行 的第二列数据并不一致,则会出现第三列也被合并到一起。

解决办法

上面的方法(mergeCells)中只对比了
1、本行与上一行该列数据是否一致;
2、下一行与本行该列数据是否一致。
现在我们进一步的去对比
本行与上一行的上一列数据是否一致
本行与下一行的上一列数据是否一致
// row.name==data[index - 1].name 假设**name** 为上一列字段名称
const mergeCells=( text , data , key , index , row)=>{
//判断上一行该列数据是否相等; 本行与上一行的上一列数据是否一致;
//如果相等则该单元格被上一列合并,直接返回rowSpan为 0
if( index !==0 && (text === data[index - 1][key]&&row.name==data[index - 1].name)){
return 0
}
let rowSpan=1;
for(let i = index + 1; i < data.length; i++){
//判断下一行是否相等 ; 本行与下一行的上一列数据是否一致;
if(text != data[i][key]||(row.name != data[i].name)){
break;
}else{
rowSpan++
}
}
return rowSpan;
}

以上内容均为个人学习笔记,不存在任何其他或者商业行为 ,如有侵权或者其他,必删除。请私聊或者评论告知。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43405717/article/details/111246097

随机推荐

浮点数用大小端存储吗_家用网络存储有必要用NAS吗?

浮点数用大小端存储吗_家用网络存储有必要用NAS吗?

现在大部分的网盘都不能使用的,能用的不买个会员上传下载的只有几KB的速度让很多人都崩溃了。所以在路由器能外接U盘或移动硬盘的时候,很多伙伴可能都采用过路由器外挂U盘或移动硬...

weixin_39628160 阅读(160)

Spring-1-认识Spring框架与ApplicationContext对象

Spring-1-认识Spring框架与ApplicationContext对象

目录1、Spring概述1.1 Spring框架是什么1.2 Spring优点1.2.1轻量1.2.2 针对接口编程,解耦合1.2.3 AOP编程的支持1.2.4方便集成各种优秀框架1....

风暴计划 阅读(371)

final关键字

final关键字

总之:final修饰后就不能变了,也不允许覆盖!(可以重载!)注意:final修饰的类不能被继承5.final修饰实...

咕噜咕噜崩 阅读(277)