Vue進階（幺貳叄）：v-for實現一行展示n個元素

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