需求1
将年级为高三年级的这一个列合并。
原始效果：
原始图片.png
最终效果：
最终效果.png
代码块
const { Table, Divider, Tag } = antd;
/**
* 动态合并表格方法
* @param {*} text 表格每列对应的值
* @param {*} data 后台返回的展示数据数组, 数据需要按字段排序
* @param {*} key 表格每列表头字段
*/
const mergeCells = (text, data, key, index) => {
// 上一行该列数据是否一样
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;
}
rowSpan++;
}
return rowSpan;
};
const columns = [
{
title: '年级',
dataIndex: 'grade',
key: 'grade',
width: 130,
render: (text, record, index) => {
const obj: any = {
children: text !== null ? text : '',
props: {},
};
obj.props.rowSpan = mergeCells(text, tableData, 'grade', index);
return obj;
},
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 130,
},
{
title: '出生年月',
dataIndex: 'birthday',
key: 'birthday',
width: 150,
},
{
title: '家庭住址',
dataIndex: 'address',
key: 'address',
width: 200,
},
]
const tableData = [
{
grade: '高三年级',
name: '迪迦',
birthday: '1997-01-01',
address: '远古时代的山旮旯里面',
},
{
grade: '高三年级',
name: '戴拿',
birthday: '1998-01-01',
address: '遥远的外太空',
},
{
grade: '高三年级',
name: '杰克',
birthday: '1990-01-01',
address: 'm78星云',
},
{
grade: '高三年级',
name: '雷欧',
birthday: '1992-01-01',
address: 'm77星云',
},
{
grade: '高二年级',
name: '杰克',
birthday: '1900-01-01',
address: 'm78',
},
];
ReactDOM.render(<Table columns={columns} dataSource={tableData} />, mountNode);
需求2
将年级为'高三年级'的这一个列合并，将家庭住址为'm78星云'的这一列合并。
代码块
const { Table, Divider, Tag } = antd;
/**
* 动态合并表格方法
* @param {*} text 表格每列对应的值
* @param {*} data 后台返回的展示数据数组, 数据需要按字段排序
* @param {*} key 表格每列表头字段
*/
const mergeCells = (text, data, key, index) => {
// 上一行该列数据是否一样
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;
}
rowSpan++;
}
return rowSpan;
};
const columns = [
{
title: '年级',
dataIndex: 'grade',
key: 'grade',
width: 130,
render: (text, record, index) => {
const obj: any = {
children: text !== null ? text : '',
props: {},
};
obj.props.rowSpan = mergeCells(text, tableData, 'grade', index);
return obj;
},
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 130,
},
{
title: '出生年月',
dataIndex: 'birthday',
key: 'birthday',
width: 150,
},
{
title: '家庭住址',
dataIndex: 'address',
key: 'address',
width: 200,
render: (text, record, index) => {
const obj: any = {
children: text !== null ? text : '',
props: {},
};
obj.props.rowSpan = mergeCells(text, tableData, 'address', index);
return obj;
},
},
]
const tableData = [
{
grade: '高三年级',
name: '迪迦',
birthday: '1997-01-01',
address: 'm78星云',
},
{
grade: '高三年级',
name: '戴拿',
birthday: '1998-01-01',
address: 'm78星云',
},
{
grade: '高三年级',
name: '杰克',
birthday: '1990-01-01',
address: 'm78星云',
},
{
grade: '高三年级',
name: '雷欧',
birthday: '1992-01-01',
address: 'm78星云',
},
{
grade: '高二年级',
name: '杰克',
birthday: '1900-01-01',
address: '山旮旯',
},
];
ReactDOM.render(<Table columns={columns} dataSource={tableData} />, mountNode);
效果图：
合并两个单元格.png
