Vue进阶（幺贰叁）：v-for实现一行展示n个元素

需求背景

在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。

需求分析

可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。

解决方案

经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下：

<el-row v-for="(btnArr, index) in oprBtn" :key="index">
	<el-col v-for="(btn, index) in btnArr" :key=''btn.laberid">
		<el-button type="text" @click="btnClick(btn.laberid)"></el-button>
	</el-col>
</el-row>

  

let arrTmp = []
this.displayBtn = []
if (this.displayBtn.length === 1) {
	this.oprBtn.push(this.displayBtn)
} else {
	this.displayBtn.forEach((item, index, cols) => {
		arrTmp.push(item)
		if ((index + 1) % 2 === 0) { this.displayBtn.push(arrTmp) arrTmp = []
		}
	})
}

  

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/106516572