vue table循环嵌套form表单时高频率传值简单处理

随手记：当form表单被组件引用在table循环中并length大于1时，每次点击保存，$emit方法在form的下标0传回时就执行了保存造成报错，特用防抖来解决。

防抖

1. 防抖本质上就是优化高频率执行代码的一种手段；
2. n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时；
3. 可以通过 setTimeout 实现；

demo实现

<template>
	<el-button @click="thesubmit">提交</el-button>
	<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		<el-tab-pane v-for="(item, index) in arr" :key="index" :label="item.name" :name="index">
			/* 引用form组件，并对form组件已有属性进行赋值 planConfig: {} */
			<forms :submit="submit" :planConfig="planConfig" @submitItem="submitItem"/>
		</el-tab-pane>
	</el-tabs>
</template>

<script>
	import forms from './forms';
	
	export default {
		components: {
			forms,
		},
		data() {
		  return {
			arr: [],
			// 定义是否触发提交
			submit: false,
			// 定时器参数
			timer: null,
		   };
		},
		methods: {
			// 点击提交按钮触发状态发生改变
		   thesubmit() {
		   	  this.submit = true;
		   },
		   // 通过$emit回调方法接收arr[index]的form
		   submitItem(val) {
		     // 回调val包含[index, item],当下标相等时取当前下标的item
		     this.arr.forEach((item, index) => {
		      	if (index === val[0]) {
		      	  this.arr[index].planConfig = val[1];
		      	}
		      }
		      // foreach在取到[0]时，就会触发接口事件，所以添加防抖，在取到所有item之后再进行接口触发
		      if (this.timer) {
		      	 clearTimeout(this.timer);
		      }
		      this.timer = setTimeout(() => {
		      	 // todo request
		      }, 500);
		   },
		},
	}
</script>