怎样利用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) 表单验证指定字段

```

<div v-for="(item, index) intemp.templateValue" :key="index">

  <el-form-item v-if="0===index" :label="$t('模板内容值')" :prop="item" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" type="text" style="width: 300pxdisplay: block"/>

  <el-form-item v-else :prop="item" :rules="{required: true,message: `${item}内容不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" type="text" style="width: 300pxdisplay: block"/>

</div>

```

---