更新时间:2022-02-08 22:36:12
我要做的是创建一个计算属性,将项目数组划分(或分块)为适当数量的列。
下面的示例使用弹性框布局和一个额外的列元素。
new Vue({
el: 'main',
data: {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
cols: 2
},
computed: {
columns () {
let columns = []
let mid = Math.ceil(this.items.length / this.cols)
for (let col = 0; col < this.cols; col++) {
columns.push(this.items.slice(col * mid, col * mid + mid))
}
return columns
}
}
})
.container {
display: flex;
border: 1px solid;
}
.col {
margin: 10px;
border: 1px solid;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.item-container {
border: 1px solid;
padding: 5px;
margin: 5px;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<main>
<p><label>Columns:<label> <input type="number" v-model="cols"></p>
<div class="container">
<div class="col" v-for="column in columns">
<div class="item-container" v-for="item in column">{{item}}</div>
</div>
</div>
</main>
如果您希望以一种不太冗长的方式对Items数组进行分块,请参阅Split array into chunks