效果如图:
原图为:
想要的结果为:
代码如下:
<div class="table-wrapper" v-if="data.type === 4">
<div class="table-header">
<div v-for="column in columnsFour" :key="column.key" class="header-cell">{{ column.title }}</div>
</div>
<div v-for="(item, index) in dataFour" :key="index" class="table-row">
<div v-for="column in columnsFour" :key="column.key" class="data-cell">{{ item[column.key] }}</div>
</div>
</div>
数据如下:
dataFour: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
columnsFour: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
]
CSS样式如下:
.table-wrapper {
display: flex;
flex-direction: row;
}
.header-cell {
padding: 8px 16px;
border-bottom: 1px solid #ccc;
}
.table-row{
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.table-header{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.data-cell {
padding: 8px 16px;
border-bottom: 1px solid #ccc;
}
.data-cell:last-child {
border-right: none;
}
最终效果图:
这就OK啦!是不是很简单