需求
需要实现一个循环来循环元素，每行4个元素
css flex
CSS flex实现多行多列的多种方式
vue v-for实现多行等分布局-三等分
代码语言：javascript复制<template>
<div >
<!-- <div v-for="item in dataList" class="parent">-->
<!-- <div class="child">{{item.id }}</div>-->
<!-- </div>-->
<h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3>
<section class="flex-outer flex-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
<h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3>
<section class="flex-outer flex-basis">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
<h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3>
<section class="flex-outer width-attr">
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
</section>
</div>
</template>
<script>
export default {
data () {
return {
dataList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' },
{ id: 7, name: 'F6' },
]
}
},
}
</script>
<style scoped>
.flex-outer {
display: flex;
flex-wrap: wrap;
}
.flex-outer article {
background: limegreen;
border: 1px solid #eee;
box-sizing: border-box;
color: #fff;
padding: 15px;
}
/* flex合并属性 */
.flex-outer.flex-attr article {
flex: 1 0 50%;
}
/* flex-basis */
.flex-outer.flex-basis article {
flex-basis: 50%;
}
/* 设置width */
.flex-outer.width-attr article {
width: 50%;
}
pre {
display: flex;
justify-content: space-between;
}
</style>自己实现
代码语言：javascript复制<template>
<div>
<div class="wrapper">
<div class="wrapper-content" v-for="item in dataList">
<span>{{item.id}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
dataList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' },
{ id: 7, name: 'F6' },
]
}
},
}
</script>
<style scoped>
.wrapper{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
}
.wrapper-content{
width: 33%;
}
</style>有些说css控制有时候不起作用，那么就需要js来控制
js 实现
VUE的for循环一行两列
vue elementui 实现每行两列循环
<template>
<div >
<div v-for='(item,index) in dataList' v-if='index%2==0'>
<tr >
<td style="width: 50px; background: red">
{{item.id}}
</td>
<td v-if='index 1<dataList.length'>
{{dataList[index 1].id}}
</td>
</tr>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dataList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' },
{ id: 7, name: 'F6' },
]
}
},
}
</script>
<style scoped>
</style>这种方式虽然可以实现数据换行，但是要写很多逻辑，而且要算好下标，感觉也不是很好
将一维数据转换成二维数组
vue v-for list数据循环 每3或者（n）个一组
代码语言：javascript复制<template>
<div >
<div class="wrapper" v-for="(item) in computedList">
<div class="wrapper-content" v-for="(cell, i) in item" :key="i">
<div class="flex-outer" style="width: 25%">{{cell.id}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
dataList: [
{ id: 1, name: 'F1' },
{ id: 2, name: 'F2' },
{ id: 3, name: 'F3' },
{ id: 4, name: 'F4' },
{ id: 5, name: 'F5' },
{ id: 6, name: 'F6' },
{ id: 7, name: 'F6' },
]
}
},
computed: {
computedList() {
let index = 0;
let num = 4; // 每行几个元素
let arr = [];
for (let i=0; i<this.dataList.length; i ) {
index = parseInt(i/num);
if (arr.length <= index) {
arr.push([]);
}
arr[index][i%num] = this.dataList[i];
}
console.log(arr)
return arr;
}
},
}
</script>
<style scoped>
.wrapper{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper-content{
width: 33%;
}
</style>这个一维数组转换二位数组算法可以优化，后续补充
