react中antd Table表格的行列合并,常用的方法和遇到的问题
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}
}
}
}
},