任何人都可以帮助我通过 bootstrap-4 中的 vue-js 实现 3 列布局吗?我想让我的复选框显示为 3 列。用户按顺序排列,我希望顺序从第一列开始,然后是第二列,最后是第三列。
<div v-for="(user, index) in users">
<div class="{'controls' : (index % (users.length/3)===0)}">
<input type="checkbox" :id="'user_'+user.id" :value="user.id" class="form-check-input" v-model="form.checkedUsers">
<label class="form-check-label" for="'user_'+userr.id">
<img :src="user.photo_url" class="small-photo mx-2"> @{{ user.first_name }} @{{ user.last_name }}
</label>
</div>
</div>
谢谢
最佳答案
使用 Vue 方法,使用数组“ block ”方法将项目分为 3 组。使用嵌套的 v-for
重复组,然后重复每个组中的项目。这会将它们按从上到下顺序排列为 3 列...
Vue2 Controller :
methods: {
chunk: function(arr, size) {
var newArr = [];
for (var i=0; i<arr.length; i+=size) {
newArr.push(arr.slice(i, i+size));
}
this.groupedItems = newArr;
}
},
标记:
<div class="container" id="app">
<div class="row">
<div class="col-sm-4 py-2" v-for='(g, gIndex) in groupedItems'>
<form class="form-inline" v-for='(item, index) in g'>
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">
{{ item.name }}
</label>
</div>
</form>
</div>
</div>
</div>
演示: https://www.codeply.com/go/ZaiUsUupsr
一个替代选项是将它们放在 3 列中,而不在循环中每 3 项重新迭代 .row
。所有复选框都可以位于一行行
中,并且它们将位于从左到右排序的 3 列中。
演示: https://www.codeply.com/go/3gOvXFzaOw
<div class="container">
<div class="row">
<div v-for="item in items" class="col-sm-4 py-2">
<form class="form-inline">
<div class="form-check">
<input class="form-check-input" type="checkbox" >
<label class="form-check-label">
{{ item.name }}
</label>
</div>
</form>
</div>
</div>
</div>
关于vue.js - Vue Bootstrap 4中的三列复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49509467/