react antd组件table跨行跨列

最新推荐文章于 2024-09-12 17:51:16 发布

前端该溜子

最新推荐文章于 2024-09-12 17:51:16 发布

阅读量1.5k

点赞数

分类专栏：软件编程 Web前端文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/xye1230/article/details/123497937

版权

软件编程同时被 2 个专栏收录

16 篇文章

订阅专栏

Web前端

16 篇文章

订阅专栏

本文详细介绍了在React应用中使用Ant Design前端框架时，如何在Table组件中实现复杂的跨行跨列效果。内容主要针对对官网说明感到困惑的开发者，通过具体的逻辑和条件判断来解释这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给官网上的看不懂的同行写的，毕竟我一开始也看不懂（现在也没看懂）

逻辑是在列的设置上写，通过条件判断跨行还是不跨行以及跨多少行

const columns =[
	title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render:(text,record,index)=>{
    	if(text === '小李'){
    		return {
				chidren: <div>填你要写的内容</div>,
				props: {
					//表示跨了四行或者四列
					colSpan: 4,	
					rowSpan: 4
				}
			}
    	}
    }
]