简单的表格：
将分类中相同的值合并效果如下:
静态数据合并单元格
实现：
- 将要合并列的第一列（index 为 0） 的 rowSpan 设置为 2。index 为 1（第二列） 的 rowSpan 设置为 0。
- 将 index 为 2 （第三列）的 rowSpan 设置为 1（可以不用设置 rowSpan，默认为1）。
- 将 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": "吃不起，太贵" } ]
总结:
- 设置合并列的第一列 rowSpan 为合并数。
- 设置其他相同项 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 } ]
