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

四、拓展阅读

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

五、延伸阅读 ElementUI 表单校验注意事项

5.1 表单检验

注：prop对应的不单单是rules规则里面的验证项，同时对应着form-item下v-model绑定的值。prop绑定的类要与el-form-item下v-model的值相对应。否则就算校验元素输入字符，也会提示“请输入”之类的提示语，造成校验不友好问题。

5.2 清除表单校验

// 清除表单校验的提示
if (this.$refs['XXX']) {
　// 延时执行
  this.$nextTick(function () {
    this.$refs['XXX'].clearValidate();
  })
};

5.3 callback()

vue自定义表单校验，不管检验是否通过一定要加 callback();

validateDatasourceNm(rule, value, callback) {
	let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //只允许输入正数
	if (value === '') {
		callback();  //这句话没有的话 不知名的问题产生。
	} else {
		if (!reg.test(value)) {
			callback(new Error(this.ruleNames[rule.fullField]));
		}
		callback();
	}
}