jeecgboot前端antd Table组件动态合并单元格

简单的表格：
将分类中相同的值合并效果如下:

静态数据合并单元格

实现：

1. 将要合并列的第一列（index 为 0） 的 rowSpan 设置为 2。index 为 1（第二列） 的 rowSpan 设置为 0。
2. 将 index 为 2 （第三列）的 rowSpan 设置为 1（可以不用设置 rowSpan，默认为1）。
3. 将 index 为 3 （第四列）的 rowSpan 设置为 3，后面列（5和6列）的 rowSpan 设置为 0。

const columns = [
    {
        title: '分类',
        dataIndex: 'category',
        render: (value, row, index) => {
	      const obj = {
	        children: value,
	        props: {},
	      };
	      if (index === 0) { // 第一列
	        obj.props.rowSpan = 2;
	      }
	      if (index === 1) {  // 第二列
	        obj.props.rowSpan = 0;
	      }
	      //没有相同项时可以不用设置 colSpan 
	      if (index === 2) {  // 第三列
	        obj.props.rowSpan = 1;
	      }
	      if (index === 3) {  // 第四列
	        obj.props.rowSpan = 3;
	      }
	      if (index === 4) {  // 第五列
	        obj.props.rowSpan = 0;
	      }
	      if (index === 5) {  // 第六列
	        obj.props.rowSpan = 0;
	      }
	      return obj;
      }   
    },
    {
        title: '名称',
        dataIndex: 'name',
    },
    {
        title: '评价',
        dataIndex: 'desc',
    },
];

const data = [
  {
      "category":"水果",
      "name": "桃子",  
      "desc": "好吃"
    },{
      "category":"水果",
      "name": "梨子",  
      "desc": "真好吃"
    },{
      "category":"蔬菜",
      "name": "茄子",  
      "desc": "真TM好吃"
    },{
    "category":"家禽",
     "name": "牛肉",  
      "desc": "太好吃了"
    },{
    "category":"家禽",
     "name": "羊肉",  
      "desc": "好吃到停不下来"
    },{
    "category":"家禽",
     "name": "猪肉",  
      "desc": "吃不起，太贵"
    }
]

总结:

1. 设置合并列的第一列 rowSpan 为合并数。
2. 设置其他相同项 rowSpan 为 0。

动态数据合并单元格

可以先把数据源处理好再直接渲染页面，处理这种业务逻辑最好的方式就是直接处理数据状态，用数据状态代替业务逻辑。

import dataJson from './data/Table.json';
let data = dataJson.data;
let field = 'category';
const  changeData = (data,field)=>{
    let count = 0;									// 重复项的第一项
    let indexCount = 1;								// 下一项
    while (indexCount<data.length){
        var item = data.slice(count,count+1)[0];	// 获取没有比较的第一个对象
        if(!item.rowSpan){
            item.rowSpan = 1;						// 初始化为1 合并单元格
        }
        if(item[field] === data[indexCount][field]){// 第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
            item.rowSpan++;
            data[indexCount].rowSpan = 0;			// 其他为0 
        }else {
            count = indexCount;
        }
        indexCount++;
    }
}
changeData(data,field); 							// 处理数据

将每个相同项的第一项的 rowSpan 设置为合并数。并且其他的相同项设置为 0。数据格式如下：

data = [
  {
      "category":"水果",
      "name": "桃子",  
      "desc": "好吃",
      "rowSpan":2 
    },{
      "category":"水果",
      "name": "梨子",  
      "desc": "真好吃",
      "rowSpan":0 
    },{
      "category":"蔬菜",
      "name": "茄子",  
      "desc": "真TM好吃",
       "rowSpan":1
    },{
    "category":"家禽",
     "name": "牛肉",  
      "desc": "太好吃了",
       "rowSpan":3
    },{
    "category":"家禽",
     "name": "羊肉",  
      "desc": "真不错", 
      "rowSpan":0
    },{
    "category":"家禽",
     "name": "猪肉",  
      "desc": "吃不起，太贵", 
      "rowSpan":0
    }
]