vue-ant-design:a-table使用合并单元格（表头合并，表体合并）

在做项目中常常遇到需要合并单元格的情况，有时候是表头合并在一起有时候需要表格内数据合并在一起，也有都合并的

下面是我设置的都合并的情况

表头合并：在column内要合并列的对象内设置colSpan:number(合并几个)，然后把其它被合并的column对象内设置colSpan:0(会默认不显示)。这样即可完成表格头的合并

表格体合并：这个需要用到customRender：

先看官网给的说明：customRender=》生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并

Function(text, record, index) {}|slot-scope

说明上的意思很明显，就是渲染出一个函数返回一个obj对象，在obj对象内包含一些本身属性如children,attrs. 我们只需要设置attrs.colSpan = number(想要合并的表格数)即可

代码如下：

custorm = [
{
          // title: '产品名称',
          key: 'producType',
            dataIndex: 'producType',
                width:90,
                colSpan: 3,//合并表头
                //自定义的渲染格式
                customRender:(value, row, index) => {//合并行 和 标题头相同 本行合并几个其它行用colSpan = 0去取消显示
                    console.log(value,row,index)//本列的值,所有行数据包括本列,第几列
                    const obj = {
                        children: value,
                        attrs: {},
                      };
                       obj.attrs.colSpan = 3;//这里设置的是表格体的合并
                       return obj;
                }
        },
        {
          title: '品名规格',
          key: 'guige',
            dataIndex: 'guige',
                width:180,
                colSpan: 0,
                customRender:(value, row, index) => {
                    console.log(value,row,index)//本列的值,所有行数据包括本列,第几列
                    const obj = {
                        children: value,
                        attrs: {},
                      };
                       obj.attrs.colSpan = 0;
                       return obj;
                }
        },
]

根据参数说明可以判断第三个参数是行数，index=第几行，根据这个的判断可以添加行的合并比如

      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index === 2) {
            obj.attrs.rowSpan = 2;
          }
          // These two are merged into above cell
          if (index === 3) {
            obj.attrs.rowSpan = 0;
          }
          if (index === 4) {
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },

这样第三行就会和第四第五行合并：需要注意的是行和行的合并只有表单体合并没有表头合并

如果需要表头合并只需要在column内设置children：{设置规格和父级clumn一样}即可：（利用分组表头）

columns[n] 可以内嵌 children，以渲染分组表头。

const column = [{
    title: 'Other',
    children: [
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 200,
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Address',
        children: [
          {
            title: 'Street',
            dataIndex: 'street',
            key: 'street',
            width: 200,
          },
          {
            title: 'Block',
            children: [
              {
                title: 'Building',
                dataIndex: 'building',
                key: 'building',
                width: 100,
              },
              {
                title: 'Door No.',
                dataIndex: 'number',
                key: 'number',
                width: 100,
              },
            ],
          },
        ],
      },
    ],
  },]