React ant Design 表格合并单元格

React ant Design 表格合并单元格

一、对应列操作

在对应的字段列上接入一下代码
 render: (text, record, index) => {
		const obj = {
		  children: <span>{text}</span>,
		  props: {}
		};
		//过滤获取到相同的数据
		let arr = this.state.dataSource.filter((res) => {
		  return res.name == record.name;
		});
		if (index == 0 || this.state.dataSource[index - 1].name != record.name) {
		  obj.props.rowSpan = arr.length;
		} else {
		  obj.props.rowSpan = 0;
		}
		return obj;
	  },
	  其中record.name即为要合并的字段名称

效果

公司保密见谅

二、函数形式(这个有些场景好像用不了)

	函数形式		  
	   //合并数组单元格
	  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)}/>

两种情况智者见智，仁者见仁。本人常用第一种，以上仅供参考。。。。。。