利用<table>的原生组件<td>多列展示实现横向排列,具体代码如下
valign="top" 该属性不加会导致排列的表格错行
<table>
<tr>
<td valign="top" v-for="(item,index) of dataList">
<a-table
:ref="index"
rowKey="id"
:columns="[
{title: item.title, align: 'center',width:150,dataIndex: 'name'},
{title: item.title, align: 'center',width:150,dataIndex: 'id'}
]"
:dataSource="item.data"
:pagination = false
:customRow="customRow"
>
</a-table>
</td>
</tr>
</table>
使用的数据格式为
[
{
title: '第一个表',
data: [
{
name:"名字1",
id:"111111"
},
{
name:"名字2",
id:"22222"
}
]
},
{
title: '第二个表',
data: [
{
name:"名字1",
id:"33333"
},
{
name:"名字2",
id:"4444"
}
]
},
{
title: '第三个表',
data: [
{
name:"名字1",
id:"55555"
},
{
name:"名字2",
id:"66666"
}
]
}
]