vue+element ui el-table 完成动态添加表格&&动态合并踩坑记录

添加后的图片效果

1.关键：写一个标识数组（例如这个图表中的，以 日期 indexObj 为唯一标识，每个不一样的日期合并行数记录下来）

2.必要：监听表格数据（无深度监听）当表格数据添加行/删除行/复制时，都有表格数据的动态变化，从而计算标识

3.关键：合并行方法 objectSpanMethod({ row, columnIndex })

注意传值是 { ...this.rowObj } 我也不知道为什么传this.rowObj会造成数据乱，这也是一个对象啊？？？

步骤：

1.根据点击复制按钮行的信息，得到上一工作日Day

2.根据此Day，执行下面方法，得到上一工作日所有数据,此处Json转化，实际 *** 作中没有转换时，插入数据会乱掉。

3.改变标识，进行循环插入

其实element-ui Form 表单已经有介绍了，之前没注意到，链接地址：

https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

也可以参考此资料： https://www.cnblogs.com/zdd2017/p/11065429.html

问题场景：

vue element ui在做编辑和添加时候使用同一个组件页面，先点击编辑然后在点击新增，此时表单数据不清空，使用this.$refs[dataForm].resetFields()也无效。

问题原因：

点击编辑 再点击添加，这时候数据已经赋值了，this.$refs['dataForm'].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据，表单渲染时就会将这个修改对象作为初始值，所以出现无效了。

解决方法：

（1）用 nextTick(() =>{

this.$refs['dataForm'].resetFields()

})

（2）如果（1）不行的话就直接在页面初始的时候将表单数据重置：

this. refs['dataForm'].clearValidate() //移除表单项的校验结果

})

for(let key in this.dataForm){

this.dataForm[key]=""

}

以上over~

---