react中antd Table表格的行列合并,常用的方法和遇到的问题 | 您所在的位置:网站首页 › js鼠标滑动合并单元格 › 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:{text}, 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} } } } }, |
CopyRight 2018-2019 实验室设备网 版权所有 |