表单引擎

FormEditor表单填写

基础用法

text value 11 does not match pattern /^([1][3,4,5,6,7,8,9])\d{9}$/
0/5
广东 江西 山东
添加项
30

{ "object": { "object": {} }, "array": [], "text": "11" } 
<template>
  <div class="wrapper">
    <form-editor
      ref="formEditor"
      :schema="schema"
      :value="formData">
    </form-editor>
    <p style="padding-bottom: 20px;">
      <gd-button
        @click="onClick">表单校验
      </gd-button>
    </p>
    {{formData}}
  </div>
</template>

<script>
  const schema = {

    text: {
      label: '文本',
      type: 'text',
      rules: [
        { type: 'string', required: true },
        { type: 'string', pattern: '^([1][3,4,5,6,7,8,9])\\d{9}$' },
      ],
      // 栅格布局所占格数
      span: 6,
      default: '11',
    },

    number: {
      label: '数字',
      type: 'number',
      span: 6,
      depRules: [
        {
          dep: {
            key: 'text',
            opt: 'reg',
            val: '^([1][3,4,5,6,7,8,9])\\d{9}$',
          },
          type: 'number',
          required: true,
        },
      ],
      depStyles: [
        {
          dep: {
            key: 'text',
            opt: 'eq',
            val: '11',
          },
          type: 'hidden',
        },
      ],
    },

    label: {
      type: 'label',
      label: '这是一段label说明',
    },

    textarea: {
      label: '文本域',
      type: 'textarea',
      // 仅textarea有效
      maxlength: 5,
      rules: [
        { type: 'string', max: 4 },
      ],
      // label对齐方式
      labelAlign: 'right',
      // label的宽度
      labelWidth: '110px',
    },

    radio: {
      // 字符/数字, 如: 'gd'
      label: '单选-radio',
      type: 'radio',
      options: [
        { label: '广东', value: 'gd' },
        { label: '江西', value: 'jx' },
        { label: '山东', value: 'sd' },
      ],
    },

    select: {
      // 字符/数字, 如: 'gd'
      label: '单选-select',
      type: 'select',
      options: [
        { label: '广东', value: 'gd' },
        { label: '江西', value: 'jx' },
        { label: '山东', value: 'sd' },
      ],
      props: {
        filterable: true,
      },
    },

    checkbox: {
      label: '多选',
      // 数组, 如: ['gd', 'jx']
      type: 'checkbox',
      options: [
        { label: '广东', value: 'gd' },
        { label: '江西', value: 'jx' },
        { label: '山东', value: 'sd' },
      ],
    },

    boolean: {
      label: '布尔值',
      type: 'boolean',
    },

    region: {
      label: '地区',
      type: 'region',
    },

    object: {
      label: '对象',
      type: 'object',
      fields: {
        text: {
          type: 'text',
          label: '文字',
        },
        number: {
          type: 'number',
        },
        object: {
          type: 'object',
          expand: false,
          fields: {
            name: {
              type: 'text',
              label: '姓名',
            },
            age: {
              type: 'number',
            },
          },
        },
      },
    },

    array: {
      label: '数组',
      type: 'array',
      fields: {
        name: {
          type: 'text',
          rules: [
            { type: 'string', required: true },
          ],
        },
        age: {
          type: 'number',
        },
      },
    },

    custom: {
      label: '自定义渲染函数',
      render: (h, { value, keyName, schema, supKeyName }) => <gd-input
        value={value[keyName]}
        onInput={(val) => {
          // 手动实现双向绑定
          value[keyName] = val;
        }}
      />,
    },

    datetime: {
      type: 'datetime',
      label: '日期',
    },
  };

  export default {
    data () {
      return {
        formData: {},
        schema,
      };
    },

    methods: {
      onClick () {
        this.$refs.formEditor.validate(
          (data) => {
            console.log('验证成功', data);
          },
          (data) => {
            console.log('验证失败', data);
          },
        );
      },
    },

    mounted () {
      setTimeout(() => {
        this.formData = {
          'object': {
            'object': { 'name': '2222', 'age': 3333 },
            'text': '222', 'number': 333333,
          },
          'array': [],
          datetime: '2019-11-11 12:00:00',
        };
      }, 1000);
    },
  };
</script>

<style lang="less">
  .wrapper {

    h2 {
      margin-bottom: 20px;
    }
  }
</style>

异步数据

{} 
<template>
  <div class="wrapper">
    <form-editor
      ref="formEditor"
      :schema="schema"
      :value="formData">
    </form-editor>
    {{formData}}
  </div>
</template>

<script>
  const schema = {

    select: {
      label: '单选-select',
      type: 'select',
      options: [],
    },

  };

  export default {
    data () {
      return {
        formData: {},
        schema,
      };
    },

    mounted () {
      setTimeout(() => {
        this.schema.select.options = [
          { label: '广东', value: 'gd' },
          { label: '江西', value: 'jx' },
          { label: '山东', value: 'sd' },
        ];
      }, 5000);
    },
  };
</script>

依赖校验

{ "textPattern": "1", "textLen": "1" } 
<template>
  <div class="wrapper">
    <form-editor
      ref="formEditor"
      :colcount="2"
      :schema="schema"
      :value="formData">
    </form-editor>
    <p style="padding-bottom: 20px;">
      <gd-button
        @click="onClick">表单校验
      </gd-button>
    </p>
    {{formData}}
  </div>
</template>

<script>
  const schema = {

    labelRequired: {
      type: 'label',
      label: '依赖非空',
      span: 12,
    },
    depRequired: {
      label: '依赖',
      type: 'text',
    },
    textRequired: {
      label: '文本',
      type: 'text',
      depRules: [
        {
          dep: {
            key: 'depRequired',
            opt: 'eq',
            val: '1',
          },
          type: 'string',
          required: true,
          message: '依赖为1时, 文本不能为空',
        },
        {
          dep: {
            key: 'depRequired',
            opt: 'gt',
            val: '10',
          },
          type: 'string',
          required: true,
          message: '依赖大于10时, 文本不能为空',
        },
      ],
    },

    labelPattern: {
      type: 'label',
      label: '依赖正则',
      span: 12,
    },
    depPattern: {
      label: '依赖',
      type: 'text',
    },
    textPattern: {
      label: '文本',
      type: 'text',
      default: '1',
      depRules: [
        {
          dep: {
            key: 'depPattern',
            opt: 'reg',
            val: '^([1][3,4,5,6,7,8,9])\\d{9}$',
          },
          type: 'string',
          pattern: '^([1][3,4,5,6,7,8,9])\\d{9}$',
          message: '依赖符合正则时, 文本不符合正则',
        },
        {
          dep: {
            key: 'depPattern',
            opt: 'in',
            val: '1,3,5',
          },
          type: 'string',
          pattern: '^([1][3,4,5,6,7,8,9])\\d{9}$',
          message: '依赖为1,3,5其中之一时, 文本不符合正则',
        },
      ],
    },

    labelLen: {
      type: 'label',
      label: '依赖大小',
      span: 12,
    },
    depLen: {
      label: '依赖',
      type: 'text',
    },
    textLen: {
      label: '文本',
      type: 'text',
      default: '1',
      depRules: [
        {
          dep: {
            key: 'depLen',
            opt: 'nie',
          },
          type: 'string',
          len: 10,
          message: '依赖不为空时, 文本长度需为10',
        },
      ],
    },

  };

  export default {
    data () {
      return {
        formData: {},
        schema,
      };
    },

    methods: {
      onClick () {
        this.$refs.formEditor.validate(
          (data) => {
            this.$toast.success('验证成功');
            console.log('验证成功', data);
          },
          (data) => {
            this.$toast.error('验证失败');
            console.log('验证失败', data);
          },
        );
      },
    },
  };
</script>

<style lang="less">
  .wrapper {

    h2 {
      margin-bottom: 20px;
    }
  }
</style>

依赖样式

{} 
<template>
  <div class="wrapper">
    <form-editor
      ref="formEditor"
      :colcount="2"
      :schema="schema"
      :value="formData">
    </form-editor>
    <p style="padding-bottom: 20px;">
      <gd-button
        @click="onClick">表单校验
      </gd-button>
    </p>
    {{formData}}
  </div>
</template>

<script>
  const schema = {

    labelHidden: {
      type: 'label',
      label: '依赖隐藏',
      span: 12,
    },
    depHidden: {
      label: '依赖',
      type: 'text',
      placeholder: '依赖为空时, 隐藏文本输入框(依赖不为空时, 显示文本输入框)',
    },
    textHidden: {
      label: '文本',
      type: 'text',
      depStyles: [
        {
          dep: {
            key: 'depHidden',
            opt: 'ie',
          },
          type: 'hidden',
        },
        {
          dep: {
            key: 'depHidden',
            // 依赖大于10时, 文本输入框隐藏
            opt: (depVal) => {
              return depVal > 10;
            },
          },
          type: 'hidden',
        },
      ],
    },

    labelDisabled: {
      type: 'label',
      label: '依赖禁用',
      span: 12,
    },
    depDisabled: {
      label: '依赖',
      type: 'text',
      placeholder: '依赖大于等于10时, 禁用文本输入框',
    },
    textDisabled: {
      label: '文本',
      type: 'text',
      depStyles: [
        {
          dep: {
            key: 'depDisabled',
            opt: 'gte',
            val: '10',
          },
          type: 'disabled',
        },
      ],
    },

    labelReadonly: {
      type: 'label',
      label: '依赖只读',
      span: 12,
    },
    depReadonly: {
      label: '依赖',
      type: 'text',
      placeholder: '依赖小于等于10时, 文本输入框只读',
    },
    textReadonly: {
      label: '文本',
      type: 'text',
      depStyles: [
        {
          dep: {
            key: 'depReadonly',
            opt: 'lte',
            val: '10',
          },
          type: 'readonly',
        },
      ],
    },

  };

  export default {
    data () {
      return {
        formData: {},
        schema,
      };
    },

    methods: {
      onClick () {
        this.$refs.formEditor.validate(
          (data) => {
            this.$toast.success('验证成功');
            console.log('验证成功', data);
          },
          (data) => {
            this.$toast.error('验证失败');
            console.log('验证失败', data);
          },
        );
      },
    },
  };
</script>

<style lang="less">
  .wrapper {

    h2 {
      margin-bottom: 20px;
    }
  }
</style>

属性配置

props

参数 说明 类型 可选值 默认值
schema 表单配置, 请参考表单数据配置规范 object — -
value 表单数据 object — -
size 表单元素尺寸 string large,small,mini -
disabled 禁用状态 Boolean — false
readonly 只读状态 Boolean — false
active-key 激活的key String — -
colcount 表单显示列数 Number 1, 2, 3, 4, 6, 12 1
gutter col之间的间距 Number - 30
label-width label的宽度 String - -
label-align label的文字对齐方式 left,center,right - -

schema.field options (字段配置项)

参数 说明 类型 可选值 默认值
type 表单域类型 String label,text,number,textarea,radio,select,checkbox,boolean,region,object,array,nation,date,year,month,datetime,time text
label 表单域label说明 String — -
rules 校验规则, 详细请参考: async-validator Array - -
maxlength 输入的最大长度, 仅field.type=textarea/text有效 Number — -
disabled 禁用状态 Boolean — false
readonly 只读状态 Boolean — false
span 表单项所占的横向格数(栅格布局, 总格数为12) Number 1-12 12
labelWidth label的宽度 String - -
labelAlign label的文字对齐方式 left,center,right - -
render 表单域自定义渲染函数, 表单域将渲染该函数返回的值 Function - -
options 选项数据源, radio,select,checkbox时有效, 格式如: [ { label, value }, { label, value } ] 或 [ value, value ] Array - -
pcaJson 地区组件数据源, region时有效 Array - -
props 其他属性对象, 将直接v-bind到表单组件上 Object - -
depRules 依赖校验规则 Array - -
depStyles 依赖样式 Function - -

depRules.item options (依赖校验规则配置项)

参数 说明 类型 可选值 默认值
dep 依赖条件 Object - -
...rule 校验规则其他属性, 详细请参考: async-validator - - -

depStyles.item options (依赖样式配置项)

参数 说明 类型 可选值 默认值
dep 依赖条件 Object - -
type 样式类型, 如: 隐藏(hidden) String readonly,disabled,hidden -

dep options

参数 说明 类型 可选值 默认值
key 依赖表单域的字段名 String - -
opt 操作符, 如: 相等(eq), 不为空(nie) String, Function eq: 等于, neq: 不等于, ie: 为空, nie: 不为空, lt: 小于, lte: 小于等于, gt: 大于, gte: 大于等于, in: 枚举在, reg: 符合正则 -
val 依赖表单域的值 String, Number - -

events

参数 说明 返回值
fieldadd 添加项事件 type, keyName
fieldsort 排序 keys
itemclick 项点击 {keyName}

methods

参数 说明
validate 数据校验

← FormSchemer 表单配置 →

Loading...

提示

提示