怎样利用Vue动态生成form表单

$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) 表单验证指定字段

vue表单中动态添加输入框的方法2019-12-20

1.数据格式

2.要动态添加的部分循环

3.点击添加时向数组中添加新对象

4.删除

效果

---