实例方法

获取实例对象 $f

  • 全局方法

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

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

属性

$f.rule

当前表单的生成规则

$f.config

当前表单的全局配置

方法

$f.fields

  • 用法

    $f.fields()
    

    获取表单所有字段名

$f.formData

  • 用法

    formData = $f.formData()
    

    获取表单的键值对

$f.getValue

  • 参数{string} field

  • 用法

    field_value = $f.getValue(field)
    

获取指定字段的值

$f.setValue

  • 参数{string|object} fieldvalue

  • 用法

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

    批量设置字段的值,别名方法changeValue,changeField

$f.removeField

  • 参数{string} [field|name]

  • 用法

    $f.removeField(field)
    

    删除指定字段

$f.validate

  • 参数{function} callback

  • 用法

    $f.validate((valid)=>{
      if(valid){
        //TODO 验证通过
      }else{
        //TODO 验证未通过
      }
       
    })
    

    表单验证

$f.validateField

  • 参数{string} field{function} callback

  • 用法

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

    表单验证指定字段

$f.resetFields

  • 用法

    $f.resetFields()
    

    重置表单

$f.destroy

  • 用法

    $f.destroy()
    

    销毁表单

$f.prepend

  • 参数{object} rule{stirng} [field|name]{boolean} isChild

  • 用法

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

    field的字段之前插入指定表单元素,不传入field默认在第一个.如果isChildtrue,将会添加到field的子级

$f.append

  • 参数{object} rule{stirng} [field|name]{bool} isChild

  • 用法

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

    field的字段之后插入指定表单元素,不传入field默认在最后一个.如果isChildtrue,将会添加到field的子级

$f.submit

  • 参数{function} onSubmit{function} fail

  • 用法

    $f.submit((formData,api)=>{
        //提交表单
    },(api)=>{
        //验证未通过
    })
    

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

$f.hidden

  • 参数{bool} hidden{string|array} [field|name]

  • 用法

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

    隐藏或显示指定组件

$f.hiddenStatus

  • 参数{string} field

    获取组件显示状态

$f.visibility

  • 参数{bool} visibility{string|array} [field|name]

  • 用法

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

    隐藏或显示指定组件

$f.visibilityStatus

  • 参数{string} field

    获取组件显示状态

$f.disabled

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

  • 用法

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

    禁用或取消指定组件

$f.clearValidateState

  • 参数{string|array} field

  • 用法

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

    清除组件的验证信息

$f.model

  • 用法

    model = $f.model()
    

    获取表单组件的生成规则,组件定义field属性才可以获取到

$f.component

  • 用法

    component = $f.component()
    

    获取自定义组件生成规则,组件定义name属性才可以获取到

$f.bind

  • 用法

    formData = $f.bind()
    

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

$f.submitBtnProps

  • 参数{object} props

  • 用法

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

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

    修改表单提交按钮规则

$f.resetBtnProps

  • 参数{object} props

  • 用法

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

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

    修改表单重置按钮规则

$f.closeModal

  • 参数{string} field

  • 用法

    $f.closeModal(field)
    

    关闭frame组件的弹出框

$f.set

  • 参数{object} node{string} keyvalue

  • 用法

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

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

$f.reload

  • 参数{array} rules

  • 用法

    $f.reload()
    

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

$f.updateOptions

  • 参数{object} options

  • 用法

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

    更新全局配置

$f.onSubmit

  • 参数{function} onSubmit

  • 用法

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

    设置表单提交的回调

$f.sync

  • 参数{string} [field|name]

  • 用法

    $f.sync(field)
    

    手动重新渲染指定组件

$f.refresh

  • 参数{bool} clear

  • 用法

    $f.refresh(true)
    

    重新渲染表单,cleartrue时会清空所有组件的缓存

$f.hideForm

  • 参数{bool} isShow

  • 用法

    $f.hideForm(true)
    

    控制表单整体显示状态

$f.method

  • 参数{string} field{string} methodName

  • 返回值Function

  • 用法

    $f.method('input','focus')();
    

    调用组件的方法

$f.toJson 0.0.4+

  • 返回值json

  • 用法

    const json = $f.toJson();
    

    将当前的生成规则转换为 json