ant-design-vue table多行表头

背景

项目中要实现多行表头的表格，，其实最主要的还是columns的写法，在columns中加上children就可以定义子表头了
参考地址：【进阶Ant-Design-Vue】你知道table多级表头嵌套展开写法吗？
后来才发现官方有提供多行表头的写法，包括通过columns属性和template风格
columns属性写法：表头分组
template写法：template 风格的 API

示例

<a-table
 :columns="columns"
  :data-source="tableData"
  :pagination="false"
  :scroll="{ x: 1200 }"
  :row-key="
    (record, index) => {
      return index
    }
  "
  class="component-contract-form__table"
  bordered
>
...
</a-table>

data(){
	return {
	   columns: [
	      {
	        title: '订单信息',
	        dataIndex: 'orderInfo',
	        key: 'orderInfo',
	        children: child1,
	      },
	      {
	        title: '账单信息',
	        dataIndex: 'billInfo',
	        key: 'billInfo',
	        children: [
	          {
	            title: '预估管理费',
	            key: 'managePay',
	            dataIndex: 'managePay',
	            align: 'right',
	          },
	          {
	            title: '预估账单税金',
	            key: 'taxesPay',
	            dataIndex: 'taxesPay',
	            align: 'right',
	          },
	          {
	            title: '预估账单总金额',
	            key: 'sumPay',
	            dataIndex: 'sumPay',
	            align: 'right',
	          },
	        ],
	      },
	      {
	        title: '操作',
	        key: 'operate',
	        dataIndex: 'operate',
	        width: '80px',
	        scopedSlots: { customRender: 'operate' },
	      },
	    ]
	  },
	}
}

生成效果如下：