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

原创

NoSilverBullet 2023-06-13 09:09:52 博主文章分类：Vue2 ©著作权

文章标签 封装数组二维数组 文章分类 Vue.js 前端开发 指尖人生

©著作权归作者所有：来自51CTO博客作者NoSilverBullet的原创作品，请联系作者获取转载授权，否则将追究法律责任

(文章目录)

一、需求背景

在开发前端项目过程中，遇到结果列表操作栏位需要每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 = []
		}
	})
}