ant-design-vue table多行表头
背景项目中要实现多行表头的表格,但是发现ant design vue并没有提供多行表头的示例,就去网上找了一下,其实最主要的还是columns的写法,在columns中加上children就可以定义子表头了参考地址:【进阶Ant-Design-Vue】你知道table多级表头嵌套展开写法吗?示例<a-table:columns="columns":data-source="tableData
·
背景
项目中要实现多行表头的表格,,其实最主要的还是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' },
},
]
},
}
}
生成效果如下:
更多推荐
已为社区贡献19条内容
所有评论(0)