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,
              },
            ],
          },
        ],
      },
    ],
  },]