表单配置 ​

本文将介绍如何设置表单配置中的UI相关配置，并详细说明各个配置项的作用。

表单全局配置

设置表单配置 ​

以下是设置表单配置的方法：

• 组件模式

在模板中设置表单配置：

<form-create :option="option"></form-create>

• 全局方法

你还可以通过全局方法创建表单并设置表单配置：

window.formCreate.create(rule, option)

构成 ​

全局配置中额外支持一下配置项

• form ：表单整体显示规则配置
• row ：表单组件布局配置
• submitBtn ：提交按钮样式配置
• resetBtn ：重置按钮样式配置
• info ：组件提示消息配置
• wrap : 配置 FormItem

配置表单(form) ​

• 类型 ： Object

• 说明 ：配置表单的整体显示规则，比如标签对齐方式和输入框对齐方式。

• 默认值 :

  {
      hideRequiredMark: false,
      layout: 'horizontal',
      labelAlign: 'right',
      labelCol: {
          span: 4
      wrapperCol: {
          span: 20
      colon: undefined,
      validateOnRuleChange: true,
      //是否显示 label
      title: true
  }

• 参考: Form props

配置布局(row) ​

• 类型 ： Object

• 说明 ：配置表单组件的布局，比如组件之间的间距。

  {
      gutter: 0,
      type: undefined,
      align: undefined,
      justify: undefined
  }

• 参考: Row props

配置提交按钮(submitBtn) ​

• 类型 ： Object

• 说明 ：配置提交按钮的样式和布局。

• 默认值 :

  {
      disabled: false,
      ghost: false,
      icon: 'upload',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'primary',
      block: true,
      innerText: '提交',
      htmlType: undefined,
      show: true,
      col: undefined,
      click: undefined,
  }

提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮

• 参考: 布局规则 | Button_props

配置重置按钮(resetBtn) ​

• 类型 ： Object

• 说明 ：配置重置按钮的样式和布局。

• 默认值 :

  {
      disabled: false,
      ghost: false,
      icon: 'sync',
      loading: false,
      shape: undefined,
      size: undefined,
      type: 'default',
      block: true,
      innerText: '重置',
      htmlType: undefined,
      show: false,
      col: undefined,
      click: undefined
  }

重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示

• 参考: 布局规则 | Button_props

悬浮提示框(info) ​

• 类型 ： Object

• 说明 ：组件提示消息配置

• 默认值 :

  {
    //提示消息类型,popover,tooltip
    type: "popover",
    placement: 'topLeft',