表单自动生成器form( 三 ) _form

校验规则
可以通过配置项设置组件的验证规则,自定义的表单组件也支持校验
在线示例
type 需要根据组件的 value 类型定义
示例
验证 input 组件必填
{type:'input',//...validate: [{type: 'string', required: true}]}
验证 date 组件必填
{type:'datePicker',//...validate: [{type: 'date', required: true}]}
验证组件最少选择三个
{type:'checkbox',//...validate: [{type: 'array', required: true, min:3}]}
参数说明参数说明类型默认值
enum
枚举类型
len
字段长度
max
最大长度
校验文案
min
最小长度
正则表达式校验
是否必选
false
校验前转换字段值
(value) => :any
type
内建校验类型，可选项
''
自定义校验
(rule, value, )
必选时，空格是否会被视为错误
false
更多高级用法可研究async- 。
修改默认按钮
本文将介绍如何使用自定义组件按钮代替默认按钮
隐藏默认按钮
首先通过设置全局配置隐藏默认的提交按钮和重置按钮
{submitBtn: false,resetBtn: false}
生成自定义按钮组件
示例中使用的是

文章插图

[{type: 'input',field: 'field-1',title: 'test',value: 'test submit',col: {span:6}},{type: 'el-button',on: {click: function(){//TODO 提交表单$f.submit();//或者$f.resetFields();}},col: {span:3,push: 1},children: ['submit']}]

组件公共配置
通过全局配置中的配置项可实现组件的公共配置,支持设置组件所有的配置项
全局配置
设置所有组件的col为{span:6},并且禁用
{global: {'*': {props: {disabled: true},col: {span: 6}}}}
设置组件上传成功的回调事件
{global: {upload: {props: {onSuccess: function(res, file){file.url = res.data.url;}}}}}
更新生成规则表单组件
生成规则
rule = [{type:'input',field: 'test',title: 'test',value: '',props: {disabled: false},emit: ['on-change']}]
直接修改生成规则
rule[0].props.disabled = true;rule[0].value = "http://www.kingceram.com/post/update";
通过$f修改
获取$f
//通过`field`获取生成规则const rule = $f.getRule('test');//修改方法通过同上
const $model = $f.model();const rule = $model.test;
$f.updateRule('test',{value: 'update',props: {disabled: true}});
修改组件的 value
修改指定组件
$f.setValue('test', "update");
批量修改
$f.setValue({test: "update"});
自定义组件
自定义组件如果需要通过$f的方法需要定义name或者field字段,自定义表单组件使用field,其他自定义组件使用name
自定义表单组件
生成规则
rule = [{type:'i-button',name: 'btn',props: {disabled: false},children: ['test Button']}]
#直接修改生成规则
rule[0].props.disabled = true;
通过$f修改
获取$f
//通过`field`获取生成规则const rule = $f.getRule('btn');//修改方法通过同上
const $component = $f.component();const rule = $component.btn;
$f.updateRule('btn',{props: {disabled: true}});
更新规则在尾部增加规则