antd如何实现table表格的rowspan、colspan行列合并

IT 文章1周前更新 小编
0 0 0

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



效果如下:
antd如何实现table表格的rowspan、colspan行列合并
更详细的可以去参考官网案例:官网案例
代码比较多,不是特别好理解,重点代码就在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;
}
© 版权声明

相关文章

暂无评论

暂无评论...