rule.push({type:"input",title:"商品简介",field:"goods_info",value:"",props: {"type": "text","placeholder": "请输入商品简介",},validate:[{ required: true, message: '请输入商品简介', trigger: 'blur' },],})
通过$f添加规则
在字段后面增加一份图片上传组件,默认添加到尾部
$f.append({type:"input",title:"商品简介",field:"goods_info",value:"",props: {"type": "text","placeholder": "请输入商品简介",},validate:[{ required: true, message: '请输入商品简介', trigger: 'blur' },],},'goods_name');
在字段之前增加一份 input 组件,默认添加到头部
$f.prepend({type:"input",title:"商品简介",field:"goods_info",value:"",props: {"type": "text","placeholder": "请输入商品简介",},validate:[{ required: true, message: '请输入商品简介', trigger: 'blur' },],},'goods_name');
删除第一条规则
rule.splice(0,1);
删除表单组件
$f.removeField('test');
删除自定义组件
$f.removeField('btn');
设置组件的插槽 slot
例如给i-input组件通过和设置前缀及后缀图标Input
{type:'input',field: 'test',title: 'test',value: '',children: [{type:'i-con',props: {type: 'ios-contact'},slot: 'prefix' //前置插槽的名称},{type:'i-con',props: {type: 'ios-search'},slot: 'suffix' //后置插槽的名称},]}
省市区联动数据
安装
npm install @form-create/data
导入
//省市二级联动import province_city from "@form-create/data/dist/province_city.js"//省市二级联动(id)import province_city_code from "@form-create/data/dist/province_city_code.js"//省市区三级联动import province_city_area from "@form-create/data/dist/province_city_area.js"//省市区三级联动(id)import province_city_area_code from "@form-create/data/dist/province_city_area_code.js"
浏览器

访问,以省市二级联动为例
formCreate.data.province_city//或者window.province_city
常见问题
$f为创建表单后返回的实例,field为字段名称,rule为表单生成规则
手动修改某个字段的值 $f.bind()[field] = '修改后的值'$f.model()[field].value = http://www.kingceram.com/post/'修改后的值'rule[2].value = '修改后的值' //rule[2]是field字段的生成规则$f.(field,value)
说明: 如果修改的值为数组必须直接赋值或使用push,等方法修改
批量赋值
$f.setValue({[field1]:value1,[field2]:value2})
动态修改表单规则 $f.model()[field].props. = [2].props. = false //rule[2]是要修改的生成规则
说明: 修改的属性需要提前在生成规则里预定义
追加表单字段
在字段后面增加一份图片上传组件,默认添加到尾部
$f.append($formCreate.maker.upload('产品主图','logo','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg').props({"action": "","maxLength": 1,"multiple": false,"type": "select","uploadType": "image","name": "file","onSuccess": function () {return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';}}).validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}),'goods_name');
在字段之前增加一份 input 组件,默认添加到头部
$f.prepend({type:"input",title:"商品简介",field:"goods_info",value:"",props: {"type": "text","placeholder": "请输入商品简介",},validate:[{ required: true, message: '请输入商品简介', trigger: 'blur' },],},'goods_name');