| Ant Design中Table表单行列合并 | 您所在的位置：网站首页 › 两个表格合并怎么合并 › Ant Design中Table表单行列合并 |
Ant Design中Table表单行列合并
|
Ant Design中Table表单行列合并
Table组件实现方法
Table组件
前几天，客户有个需求，就是把一个excel表做成一个页面，里面的行列都可能会合并。 类似这种的： 若是一个表头中的一项被分为很多列，我们第一步是按照最多列来算，把Table组件中一个属性colSpan设置等于最多列的个数，当时你会发现有的单元格会被挤出去，这就要对每一表头下面的属性进行设置了。 第二步就是按照自己的需求，单独设置自己的样式。因为先给客户看的时候要写假数据，这个表刚开始是自己设置，代码就有点啰嗦。 const columns1 = [ { title: '项目', dataIndex: 'project', colSpan: 3, align:'center', width:200, render:(value, row, index)=>{ const obj = { children:value, props:{} }; if(index === 0) {obj.props.rowSpan = 13;} if(index > 0 && index < 13){obj.props.rowSpan = 0;} if(index === 13) {obj.props.colSpan = 1;obj.props.rowSpan = 2;} if(index > 13 && index < 15){obj.props.rowSpan = 0;} if(index === 15) {obj.props.rowSpan = 3;} if(index > 15 && index < 18){obj.props.rowSpan = 0;} //测试 if(index === 18) {obj.props.rowSpan = 5;} if(index > 18 && index < 23){obj.props.rowSpan = 0;} if(index === 23) {obj.props.rowSpan = 9;} if(index > 23 && index < 32){obj.props.rowSpan = 0;} if(index === 32) {obj.props.rowSpan = 10;} if(index > 32 && index < 42){obj.props.rowSpan = 0;} if(index === 42) {obj.props.rowSpan = 6;} if(index > 42 && index < 48){obj.props.rowSpan = 0;} if(index === 48) {obj.props.rowSpan = 7;} if(index > 48 && index < 55){obj.props.rowSpan = 0;} if(index === 55) {obj.props.rowSpan = 6;} if(index > 55 && index 61 && index < 64){obj.props.rowSpan = 0;} return obj; }, }, { title: 'project1', colSpan: 0, width:200, dataIndex: 'project1', render:(value, row, index)=>{ const obj = { children:value, props:{} }; if(index === 0) {obj.props.rowSpan = 5;} if(index > 0 && index < 5){obj.props.rowSpan = 0;} if(index === 5) {obj.props.rowSpan = 5;} if(index > 5 && index < 10) {obj.props.rowSpan = 0;} if(index === 10) {obj.props.rowSpan = 3;} if(index > 10 && index < 13) {obj.props.rowSpan = 0;} if(index === 13||index === 14||index === 15) {obj.props.colSpan = 2;obj.props.rowSpan = 1;} if(index === 16) {obj.props.rowSpan = 2;} if(index > 16 && index < 18) {obj.props.rowSpan = 0;} //测试 if(index > 17 && index 22 && index 31 && index 41 && index 47 && index 54 && index 60 && index { const obj = { children:value, props:{} }; if(index === 13||index === 14||index === 15) {obj.props.colSpan = 0;obj.props.rowSpan = 1;} if(index > 17 && index 22 && index 31 && index 41 && index 47 && index 54 && index 60 && index { const obj = { children:value, props:{} }; if(index === 13||index === 14||index === 15) {obj.props.colSpan = 1;obj.props.rowSpan = 1;} if(index > 17 && index 22 && index 31 && index 41 && index 47 && index 54 && index 60 && index { const obj = { children:value, props:{} }; if(index === 13||index === 14) {obj.props.colSpan = 1;obj.props.rowSpan = 1;} if(index > 17 && index 22 && index 31 && index 41 && index 47 && index 54 && index 60 && index |
一般第一步都会先看一下ant design的文档，看看是否有相似的。最后发现是有相似的页面。像这种： 
但是我当时就仅仅只关注了Table组件的colSpan这个属性，这个在这个上面是写死的，当时可能是脑子秀逗了，不知道咋思考了，我竟然把两个表格拼在一起完成这种效果，但是有三个这样的表单，做到第三个的时候，我发现若是我继续用这种笨方法做，我就要用将近6个表把它拼接起来。我当时突然发现了自己忽略的一个细节，其实是可以实现的。
设置了三列的话，那显示的那个表头的数据colSpan:3,另外也要设置两个表头，但是 那两个表头的colSpan: 0。这相当于第一步了。【本文地址】
公司简介
联系我们