datepicker/自定义组件/动态表单模板--数据重组

使用elementUI的datepicker：



使用datepicker会事先定义一个初始值，但是这个组件的返回值是一个数组，里面两个元素分别是开始时间和结束时间，而传给后端是开始和结束的两个字段，因此需要将数组里的数据拿出来重组给开始/结束字段。
使用自定义上传组件：





首先定义一个用于上传的对象，然后将其通过中间变量传进子组件，子组件内通过props接收中间变量（用什么中间变量传进去就用什么中间变量接收），子组件内操作后通过emit出一个自定义事件，并传出参数，父组件监听这个自定义事件，当监听到这个自定义事件被emit出时，就接收emit的参数，然后使用这个被子组件更改后的上传对象类重组需要上传的表单对象中的字段（比如cerfileForm被中间变量传进去，经过子组件内部更改后再被传出来，父组件依旧self.cerfileForm这样调用，因为即使是通过中间变量传进和传出，但实际上还是cerfileForm这个对象，所以父组件用self直接调用就可以）
注意：props和data、methods调用方式相同，因为他们都是在vue实例上。

动态模板：
{
“supplierId”: “8ACAB03713C17A40E05308BC608633A7”,
“orderType”: “1000”,
“orderId”: “35000003065”,
“prodName”: “ceshi”,
“prodCode”: “ceshi”,
“equityProdDetail”: [{
“bussinessName”: “权益名称”,
“supplierProdCode”: “供应商编码”,
“bussinessCode:”: “产品编码”,
“businessCoverage”: “覆盖范围”,
“costPrice”: “2300”,
“marketPrice”: “3000”,
}],
}
当有这种需求，这是提交给后台的数据格式，这整体是一个表单，而equityProdDetail数组里的对象是可以动态添加删除的，那么问题就来了，equityProdDetail中的对象其实就相当于是模板，它的个数和包含的内容都是变化的，此时就需要将数据进行重组了。
思路是，首先得将这个数组和数组里的对象都拿出来单独定义，在提交时再将它们放进提交的表单。

单独定义模板对象和用于装模板对象的数组（这个数组会用于模板的循环渲染）
在页面初始化时created，将模板对象深拷贝给一个变量，并将变量new出实例，将实例存进数组

然后用数组在结构里循环渲染，这是页面里至少有一个模板了

当新增时，依旧深拷贝模板对象==>new实例==>添加进数组
当删除时，先判断是否只有一个模板了，若不是则根据数组里对象的下标index来删除
这时已经完成了模板的动态变化
提交时：

先对其他字段进行校验，将校验值存进数组里，用refs取得所有的模板对象，会是一个类数组，那么遍历数组对每个模板都进行校验，同样将所有的校验值存进之前的数组，此时数组里既有表单的校验结果，又有所有模板的校验结果，此时将数组整体校验。

最后将用于装模板对象的数组添加进要上传的表单，这时就完成了数据的分离与重组。