本文详细介绍了在React应用中使用Ant Design的Table组件进行行列合并的方法，包括注意事项、列合并的实现（通过colSpan调整）以及行合并的实现（通过rowSpan调整），并针对可能出现的溢出问题提供了解决方案。
1，注意事项
表头只支持列合并，使用 column 里的 colSpan 进行设置。
表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
2，表格的列合并
1，效果图：
在第十行，将前两列合并
2，实现方法：
在columns属性中render方法中设置
const columns = [
{
title: '商品名称',
dataIndex: 'commodityName',
key: 'commodityName',
render: (text, row, index) => {
if (index != 9) {
return text
} else {
return {
children:<b>{text}</b>,
props:{colSpan:2}
}
}
}
},
这段代码的意思就是：前9行正常输出，在第十行 colSpan：2,合并2列。
这样之后并没有完成，看一下效果图：
这样就溢出了一列，解决方法：上面将第十行的第一列占了两列，所有就要将原本的第十行的第二列设置不显示。
{
title: '规格',
dataIndex: 'type',
key: 'type',
render: (text, row, index) => {
if (index != 9) {
return text
} else {
return {
children:text,
props:{colSpan:0}
}
}
}
},
这样就达到了我们想要的结果
3，表格的行合并
1，效果图
2，实现方法
和列的合并一样只是要把colSpan改为rowSpan，将第八行的商品编码合并到第九行，设置第八行的 rowSpan为2时候，还要设置第九行的rowSpan为0，不然第九行也会有溢出
columns = [
{
title: '商品编码',
dataIndex: 'commodityNo',
key: 'commodityNo',
render:(text,row,index)=>{
if(index ===7){
return {
children:text,
props:{rowSpan:2}
}
}else if(index===8){
return {
props:{rowSpan:0}
}
}
}
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
