form-create

# 常见问题

提醒

fApi为创建表单后返回的实例,field 为字段名称,rule 为表单生成规则

# 手动修改某个字段的值

  1. fApi.bind()[field] = '修改后的值'
  2. fApi.model()[field].value = '修改后的值'
  3. rule[2].value = '修改后的值' //rule[2]是field字段的生成规则
  4. fApi.setValue(field,value)

说明: 如果修改的值为数组必须直接赋值或使用push,splice等方法修改

# 批量赋值

fApi.setValue({[field1]:value1,[field2]:value2})

# 动态修改表单规则

  1. fApi.model()[field].props.disabled = false
  2. rule[2].props.disabled = false //rule[2]是要修改的生成规则

说明: 修改的属性需要提前在生成规则里预定义

# 追加表单字段

  1. 在 goods_name 字段后面增加一份图片上传组件,默认添加到尾部

    fApi.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 (res, file) {
              file.url = res.data
          }
     })
     .validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}
),'goods_name')

  2. 在 goods_name 字段之前增加一份 input 组件,默认添加到头部

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

  3. 在表单尾部追加一个 input 组件

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

# 删除表单字段

  1. 删除指定字段

    fApi.removeField(field)

  2. 删除最后一个字段

    rules.pop()

# 隐藏指定字段

  1. fApi.hidden(true, field)

# 根据后台返回的规则生成表单

fetch('api').then(rule=>{
    $f = formCreate.create(rule,{
        onSubmit(formData){
            // 表单提交事件
            fApi.btn.loading(true)
            //TODO 提交表单
        }
    })
})

# 隐藏默认提交按钮

设置全局配置options.submitBtn = false即可隐藏

# 定制默认提交按钮

 option: {
      submitBtn: {
        type: "basic",
        size: "mini",
        icon: "",
        shape: "round",
        innerText: "submit",
        col: {
          span: 4,
          offset: 10
        }
      }
  }

# 显示默认重置按钮

设置全局配置options.resetBtn = true即可显示

# Vue 版本不支持 compile

vue-version

使用选中的 Vue 完整版

# 获取 $f

参考

# 在配置项中调用外层组件的方法

参考 #51 (opens new window)

# 规则正在其他form-create中使用

一个生成规则rule只能同时在一个<form-create>中使用. 如果需要多次使用:

  • 在使用前自行深拷贝
  • 从被使用的<form-create>中移除

# 验证规则无效

请注意 value 的数据类型.如果组件为多选或区间选择时 value 的数据类型为Array,需要在验证规则中设置type:'array'

验证规则说明

# switch 组件不显示

将 slot 配置项配置在 props 中

props: {
    "trueValue":"1", 
    "falseValue":"0",
    "slot": {
        open:"上架", 
        close:"下架", 
    }, 
}

# 修改组件值后页面没有更新

在表单创建后到成功渲染之前修改是无效的

  • 在生成表单之前修改
  • 在option.mounted中修改
  • 在首次表单渲染后修改

← 全局 Api →