ant design 数字范围选择框 ant design table

Ant Design中Table表单行列合并

• Table组件

• 实现方法

Table组件

前几天，客户有个需求，就是把一个excel表做成一个页面，里面的行列都可能会合并。

类似这种的：

一般第一步都会先看一下ant design的文档，看看是否有相似的。最后发现是有相似的页面。像这种：

但是我当时就仅仅只关注了Table组件的colSpan这个属性，这个在这个上面是写死的，当时可能是脑子秀逗了，不知道咋思考了，我竟然把两个表格拼在一起完成这种效果，但是有三个这样的表单，做到第三个的时候，我发现若是我继续用这种笨方法做，我就要用将近6个表把它拼接起来。我当时突然发现了自己忽略的一个细节，其实是可以实现的。

实现方法

若是一个表头中的一项被分为很多列，我们第一步是按照最多列来算，把Table组件中一个属性colSpan设置等于最多列的个数，当时你会发现有的单元格会被挤出去，这就要对每一表头下面的属性进行设置了。

设置了三列的话，那显示的那个表头的数据colSpan:3,另外也要设置两个表头，但是

那两个表头的colSpan: 0。这相当于第一步了。

第二步就是按照自己的需求，单独设置自己的样式。因为先给客户看的时候要写假数据，这个表刚开始是自己设置，代码就有点啰嗦。

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){obj.props.rowSpan = 0;}
            if(index === 61) {obj.props.rowSpan = 6;}
            if(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 <23) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 22 && index <32) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 31 && index <42) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 41 && index <48) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 47 && index <55) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 54 && index <61) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}
            if(index > 60 && index <64) {obj.props.colSpan = 2;obj.props.rowSpan = 1;}

            return obj;
          },
        },
        {
            title: 'project2',
            colSpan: 0,
            width:200,
            dataIndex: 'project2',
            render:(value, row, 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 <23) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 22 && index <32) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 31 && index <42) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 41 && index <48) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 47 && index <55) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 54 && index <61) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
            if(index > 60 && index <64) {obj.props.colSpan = 0;obj.props.rowSpan = 1;}
              
              return obj;
            },
          },
        {
          title: '单位',
          dataIndex:'unit',
          width:200,
          align:'center',
          render:(value, row, 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 <23) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 22 && index <32) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 31 && index <42) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 41 && index <48) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 47 && index <55) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 54 && index <61) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 60 && index <64) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            
            return obj;
          },
       },    
       {
          title: '数量',
          dataIndex: 'number',
          width:200,
          align:'center',
          render:(value, row, index)=>{
            const obj = {
              children:value,
              props:{}
            };      
            if(index === 13||index === 14) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}   
            
            if(index > 17 && index <23) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 22 && index <32) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 31 && index <42) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 41 && index <48) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 47 && index <55) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 54 && index <61) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            if(index > 60 && index <64) {obj.props.colSpan = 1;obj.props.rowSpan = 1;}
            
            return obj;
          },
        },
      ]

obj.props.rowSpan是设置一行的单元格，若是表头是两列不是三列，obj.props.colSpan = 2;obj.props.rowSpan = 1;这个意思是一个表头下面有两列，有两个单元格，其它的表头没有变化的话就是设置obj.props.colSpan = 1;obj.props.rowSpan = 1;一行一列一个单元格。

当时就是这个被忽略了，其它的我没有设置

实现方法，就是一个表头下面以最大的列为准，在render里面可以对列和行进行设置，重点是也要对其他的行列进行设置。