监听数据变化同时实时更新在表格中。

运用时间监听map循环对数组数据进行处理在element-ui里面显示表格问题。

今天在工作中遇到了一个非常出人意料的问题。要求是在下表进行添加删除的同时对数据进行处理在tab中显示。

如下图所示。

首先要解决的就是对数据进行监听，而且因为需要的是数组，所以采用深度监听。
然后对数据进行处理，具体代码如下

			'formlist':{
				handler:function(val,oldval){
					// 通过循环遍历数组进行赋值
					console.log(val,oldval,'事件监听')
					// 监听数据获得新值构造一个新的数组
					let arr1=[]
					// 循环数组项
					val.map(item=>{
						let arr=[]
						// 循环数组改变的数组项
						item.commissionRelationPos.map(item1=>{
							console.log(item1.formName);
							// 循环佣金档位每一个数组项
							this.gearlist.map(item=>{
								let obj={}
								obj.formName=item1.formName
								obj.gearsId=item.id
								obj.name=item.name
								obj.money=''
								arr.push(obj)
							})
						})
						// 获取佣金档位列表
						// console.log(arr,'佣金列表');
						arr1.push(arr)
						console.log(arr1,'数组');
						this.arr=arr1
					})
				},
				deep:true
			}

返回值为一个数组，数组里面分别存放了不同的改变配置，因为需求表中有添加一个新的表的功能，因此最终结果为数组形式。