背景

项目中要实现多行表头的表格,,其实最主要的还是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' },
	      },
	    ]
	  },
	}
}

生成效果如下:
ant-design-vue table多行表头

Logo

前往低代码交流专区

更多推荐