Vue中动态增加表单项的方法

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div>中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div>之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template>标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

$formCreate 参数

rules 表单生成规则 [inputRule,selectRule,...]

options 初始化配置参数 (详细见底部 createOptions)

$formCreate.maker 组件规则生成器

除hidden外,其他配置方式全部相同.详细参考表单元素规则

props,event,slot传入参数为对象,例({key:value,...})

validate,options参入参数为数组,例([options,options,..])

hidden 生成隐藏字段

1   $formCreate.maker.hidden(field,value)   

input 生成input输入框

1   $formCreate.maker.input(title,field,value)   

radio 生成单选框

checkbox 生成复选框

select 生成select选择器

switch 生成switch开关

datepicker 生成日期选择器组件,别名date

timepicker 生成时间选择器组件,别名time

inputnumber 生成数字输入框,别名number

colorpicker 生成颜色选择器组件,别名color

cascader 生成多级联动组件

upload 生成上传组件

rate 生成评分组件

slider 生成滑块组件

$f 实例方法

formData() 获取表单的value

getValue(field) 获取指定字段的value

changeField(field,value) 修改指定字段的value

resetFields() 重置表单

destroy() 销毁表单

removeField(field) 删除指定字段

fields() 获得表单所有字段名称

submit() 表单验证通过后提交表单,触发onSubmit事件

validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

validateField(field,callback) 表单验证指定字段

添加后的图片效果

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

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

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

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

步骤：

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

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

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

---