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 = []
		}
	})
}

四、拓展阅读

• 《Vue进阶（幺贰贰）：ES6 判断是否为空对象》

问题描述

在vue里出现警告信息：data functions should return an object。

原因

component中的 data () {}中return要求返回一个对像。即使无内容也要返回一个空对象。

解决方案

返回空对象

data () {
	return{}
}