实例方法

获取 $f 实例对象

  • 全局方法

    • $f = formCreate.create(rules)
    • $f = vm.$formCreate(rules)
  • 组件模式

    <form-create ref="fc" v-model="fApi" :rule="rules"></form-create>
    
    • $f = vm.fApi 1.5.2+推荐

$f.fields

  • 用法

    $f.fields()
    

    获取表单所有字段名

$f.formData

  • 用法

    formData = $f.formData()
    

    获取表单的键值对

$f.getValue

  • 参数{string} field

  • 用法

    field_value = $f.getValue(field)
    

    获取指定字段的值

$f.setValue1.5.5+

  • 参数{string|object} fieldvalue

  • 用法

    $f.setValue(field,value)
    $f.setValue({
      field1:value1,
      field2:value2,
      field3:value3
    });
    

    批量设置字段的值

$f.changeField

  • 参数{string} fieldvalue

  • 用法

    $f.changeField(field,value)
    

    修改指定字段的值,$f.changeValue是该方法的别名

$f.resetFields

  • 用法

    $f.resetFields()
    

    重置表单

$f.removeField

  • 参数{string} field

  • 用法

    $f.removeField(field)
    

    删除指定字段

$f.component 1.5.4+

  • 用法

    component = $f.component()
    
  • 数据结构

    {
        field1:{props,validate,options,slot,event,...[其他配置项]}
        field2:{props,validate,options,slot,event,...[其他配置项]}
    }
    

    获取双向数据绑定的自定义组件生成规则,自定义组件必须定义field属性才可以获取到

$f.clearValidateState 1.5.5+

  • 用法

    $f.clearValidateState();
    
    $f.clearValidateState(field);
    
    $f.clearValidateState([field1,field2]);
    

    清除组件的验证信息

$f.model

  • 用法

    model = $f.model()
    
  • 数据结构1.6.0+

    {
        field1:{value,props,validate,options,slot,event,...[其他配置项]},
        field2:{value,props,validate,options,slot,event,...[其他配置项]}
    }
    
  • 数据结构<1.6.0

    {
        field1:{value,rule:{props,validate,options,slot,event,...[其他配置项]}},
        field2:{value,rule:{props,validate,options,slot,event,...[其他配置项]}}
    }
    

    获取双向数据绑定的表单生成规则

$f.bind 1.4.1+

  • 用法

    bind = $f.bind()
    

    获取双向数据绑定的表单键值对

$f.hidden 1.4.1+

  • 参数{string} field{bool} hidden

  • 用法

    $f.hidden(field,true)
    $f.hidden([field1,field2,field3],false)
    

    隐藏或显示指定组件

$f.visibility 1.4.1+

  • 参数{string} field{bool} visibility

  • 用法

    $f.visibility(field,true)
    $f.visibility([field1,field2,field3],false)
    

    隐藏或显示指定组件

$f.disabled 1.5.5+

  • 参数{string|array} field{bool} visibility

  • 用法

    $f.disabled(field,true)
    $f.disabled([field1,field2,field3],false)
    

    禁用或取消指定组件

$f.validate

  • 参数{function} success{function} error

  • 用法

    $f.validate(()=>console.log('验证通过'),()=>console.log('验证未通过'))
    

    表单验证,如果验证通过执行success,未通过则执行error

$f.validateField

  • 参数{string} field{function} callback

  • 用法

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

    表单验证指定字段

$f.prepend

  • 参数{object} rule{stirng} field

  • 用法

    $f.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
    },undefined);
    

    field的字段之前插入指定表单元素,不传入field默认在第一个

$f.append

  • 参数{object} rule{stirng} field

  • 用法

    $f.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
    },null);
    

    field的字段之后插入指定表单元素,不传入field默认在最后一个

$f.submitStatus

  • 参数{object} props

  • 用法

    $f.submitStatus({loading:true})
    
  • 快捷操作:

    • $f.btn.loading(loading = true) 设置提交按钮进入loading状态
    • $f.btn.disabled(disabled = true) 设置提交按钮禁用状态
  • props

    {
            //按钮类型,可选值为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
    }
    

    修改表单提交按钮规则

$f.resetStatus

  • 参数{object} props

  • 用法

    $f.resetStatus({disabled:true})
    
  • 快捷操作:

    • $f.resetBtn.loading(loading = true) 设置重置按钮进入loading状态
    • $f.resetBtn.disabled(disabled = true) 设置重置按钮禁用状态
  • props

    {
            //按钮类型,可选值为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
    }
    

    修改表单重置按钮规则

$f.submit

  • 参数{function} onSubmit

  • 用法

    $f.submit((formData)=>{
        //提交表单
    })
    

    手动提交表单,如果传入onSubmit参数,就不会再触发option.onSubmit

$f.options

  • 参数{object} options

  • 用法

    $f.options(({
        onSubmit:(formData)=>{
            //提交表单
        }
    })
    

    更新全局配置

  • 参考全局配置

$f.reload

  • 参数{array} rules

  • 用法

    $f.reload()
    

    按照新的生成规则重载表单生成器,如果不传入rules会按照当前规则重载

$f.refresh

  • 用法

    $f.refresh()
    

    重新渲染表单

$f.sync

  • 参数{string} field

  • 用法

    $f.sync(field)
    

    重新渲染field组件

$f.destroy

  • 用法

    $f.destroy()
    

    销毁表单

$f.set

  • 参数{object} node{string} keyvalue

  • 用法

    $f.set(field.rule.col,'span',12)
    

    如果修改组件的规则后页面没有更新时可以尝试使用该方法,该方法使用方法与Vue.$set相同

$f.closeModal

  • 参数{string} field 1.6.0+

  • 用法

    $f.closeModal(field)
    

    关闭frame组件的弹出框