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}

                        }

                    }

                }

            },

发布了58 篇原创文章 · 获赞 41 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/Zeng__Yi/article/details/103726923