表格在前端开发用的非常多,最近一直在用antdesign开发vue项目,有一个需求就是要实现表格行合并,查看官网发现实现table表格的rowspan、colspan行列合并的案例代码如下:
{{ text }}
效果如下:

更详细的可以去参考官网案例:官网案例
代码比较多,不是特别好理解,重点代码就在columns中的customRender,尤其是里面的index表示第几行,我这里使用时index拿不到值,但可以通过value.index获取索引,通过value.text获取该字段的值,用的时候如果出现问题,需要自己再去调试下。
比如下面就是我实现某1列的每两行就合并为1行的customRender部分TS代码:
customRender: (value:any) => {
const obj = {
children: value.text,
attrs: {
rowSpan:1
},
};
if(value.index % 2 === 0){
obj.attrs.rowSpan = 2;
}
if(value.index % 2 === 1){
obj.attrs.rowSpan = 0;
}
return obj;
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...



