react+antd+dva table动态合并行

react+antd+dva table动态合并行

简介

id描述
1不同内容1
1不同内容2

需求是根据某一列例如id列两行都是1 那就将1合并为一行显示。

下面是主要代码段,由于项目是用react+antd 封装过的table表格,就直接写render中的代码了,antd的table中列column的render配置可查询官网。

思路

1、要求列表所有行的值要先进行排序,此处省略代码,也可后端排好序返回。
2、循环取出要合并的列的所有的行的值放到数组中,例如得到的数组是[14ab,14ab,14ab,15,15,16c,a17,m18],说明该列相同的值是:14ab重复3次即合并3行 ,15重复两次合并2行,其余行不合并。
3、由于已经排好序所以只要知道每行重复的次数 即每行需要合并多少行即可。我又做了一次筛选取得了每行重复次数的数组,即[3,2,1,1,1]
4、由于antd中table行合并的规则是 如果第一行合并2行,那第二行的rowSpan需要为0,因此我想把为0的行塞到次数的数组中,我又做了一次循环得到了[3,0,0,2,0,1,1,1]
5、将table的每一行rowspan的值依次设为 3,0,0,2,0,1,1,1即可

// columns的配置可查询antd官网table的行合并,我直接写render
    render: {
   		id (text, row, ui,s) {   //这里是项目中封装的render,参数可能与官网不太相同,但意思都是一样的,id代表id列,text为当前行的值,row为当前行,ui可以理解为全局this,可调用外部方法, s为当前行的index值
   		    // 循环id列所有行的值
   		    const{ props: { config: { data: { list } } } } = ui;
   		    let arr = [];
   		    list.map((item,i)=>{
   		        arr.push(item.id);
   		    })
   		    // 取到每行重复的次数,下列方法可以查询下各自函数的意思
   		    let map = arr.reduce((m,x)=> m.set(x, (m.get(x) || 0) + 1), new Map());
   		    let newMapp = Array.from(map.values()) // 取出次数 
   		    const obj = {
   		    	children: text,
   		    	props:{}
   		    }
   		    // 循环塞0
   		    let temp = '';
   		    newMap.forEach((item,i)=>{
	   		    temp += item;
	   		    if ( item > 1 ) {
	   		    	for ( let k = 0; k < item-1; k++) {
	   		    		temp += '0
	   		    	}
	   		    }
   		    })
   		    temp = temp.split(''); // 得到塞好0的数组
   		    obj.props.rowSpan =Number(temp[s])  // 给每行设置rowSpan
        }
    }

以上是循环给每一行添加rowSpan的代码段,有些代码逻辑可能不是很清晰,我也在探索中,希望各位大神路过也指点一二。

另外一种写法:

render: {
	id (text, record, ui, s) {  // 这里参数与上同样,ui相当于是全局this
		const { props: { ipState: {data: {list}} } } = ui; // 获取列表list数据;
		let v4len = 0;
		let v6len = 0;
		list.map(item => {
			if(item.id == '4') {
				v4len++;
			}else if (item.id == '6') {
				v6len++;
			}
		})
		const obj = {
			children: text == '4' ? 'IPv4': ‘IPv6’,
			props:{}
		}
		if ( s== 0 && v4len != 0){
			obj.props.rowSpan = v4len;	
		} else if (s < = v4len-1) {
			obj.props.rowSpan = 0;
		} else if (s == v4len) {
			obj.props.rowSpan = v6len;
		} else if (s > v4len && s< (v6len)+(v4len)) {
			obj.props.rowSpan = 0;
			obj.props.colSpan = 0;
		};
		return obj;
	} 
}


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值