2018-09-14 antd table 表格合并详解

列子

• 如图

  
  
  

  image.png

首先头部的合并是比较容易理解的，将其他的列作为它的孩子即可，如下所示：

const columns = [{
   title: '费用及结算',
   children: [{
     title: '名称',
     dataIndex: 'serviceName',
     key: 'serviceName',
   }, {
     title: '特殊规则',
     dataIndex: 'serviceDesc',
     key: 'serviceDesc',
   }, {
     title: '价格',
     dataIndex: 'price',
     key: 'price',
   }, {
     title: '策略',
     dataIndex: 'ploy',
     key: 'ploy',
   }, {
     title: '说明',
     dataIndex: 'desc',
     key: 'desc',
   }],
 }];

其次，我们就是最主要的合并内部表格的部分了；(我这个方法比较笨，不过便于大家理解，后期我会查看一些例子，修补更优雅的方法)

• 我们合并了第二列第二行，占据四个空间（合并二行第三四五列），切从表头开始，行数是从0开始记录的。在对应的列下，先写下，对应行的合并空格数

if (index === 1) {
    obj.props.colSpan = 4;
}

• 写好不渲染空格，不渲染的空格包括，第二行第三四五列，同理在对应的列下，写下不渲染的空格的逻辑（我这里就先写一个,价格列）

 {
     title: '价格',
     dataIndex: 'price',
     key: 'price',
     render(value, row, index) {
       const obj = {
         children: value,
         props: {},
       };
       if (index === 3) {
         obj.props.rowSpan = 0;
       }
       if (index === 1) {
         obj.props.colSpan = 0;
       }
       return obj;
     },
   }, 

• 如上所示，希望我的歪理，能让你理解。