vue动态生成下拉框_使用Vue动态生成form表单

form-create 表单生成器

具有数据收集、校验和提交功能的表单生成器，支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

如果对您有帮助，您可以在Github点右上角 "Star" 支持一下 谢谢！

示例

1.2 版本重大更新

内部结构优化

新增 规则生成器$formCreate.maker

新增 滑块、评分组件

优化 文件上传组件

修复 上传组件无法验证等问题

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git

cd form-create

npm install

引入

注意! iview版本为2.13.0,Vue版本为2.5.*

使用

let rules =window.mock;newVue({

mounted:function(){

let $f= this.$formCreate(mock,

{

onSubmit:function(formData) {

console.log(formData);

$f.submitStatus({loading:true});

}

});//动态添加表单元素

$f.append($r,'goods_name');

}

})

$formCreate 参数

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

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

$formCreate.maker 组件规则生成器

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

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

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

hidden 生成隐藏字段

$formCreate.maker.hidden(field,value)

input 生成input输入框

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

$f.validateField(field,(errMsg)=>{if(errMsg){//TODO 验证未通过

}else{//TODO 验证通过

}

});

prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个

$f.prepend({

type:"input",

title:"商品简介",

field:"goods_info",

value:"",

props: {"type": "text","placeholder": "请输入商品简介",

},

validate:[

{ required:true, message: '请输入商品简介', trigger: 'blur'},

],

});

append(rule,field = undefined)在field的字段之前输入指定表单元素,不传入field默认在最后一个

$f.append({

type:"input",

title:"商品简介",

field:"goods_info",

value:"",

props: {"type": "text","placeholder": "请输入商品简介",

},

validate:[

{ required:true, message: '请输入商品简介', trigger: 'blur'},

],

});

submitStatus(props) 修改表单提交按钮状态

$f.submitStatus({//按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置

type:"primary",//按钮大小，可选值为large、small、default或者不设置

size:"large",//按钮形状，可选值为circle或者不设置

shape:undefined,//开启后，按钮的长度为 100%

long:true,//设置button原生的type，可选值为button、submit、reset

htmlType:"button",//设置按钮为禁用状态

disabled:false,//设置按钮的图标类型

icon:"ios-upload",//按钮文字提示

innerText:"提交",//设置按钮为加载中状态

loading:false})

btn.loading() 让表单提交按钮进入loading状态

btn.finish()让表单提交按钮恢复正常状态

rules 表单元素规则

hidden 隐藏字段

hiddenRule:

{ </