表单配置

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

设置表单配置

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

组件模式

在模板中设置表单配置：

html

<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

配置示例

基础配置

const option = {
    form: {
        layout: 'horizontal',  // 水平布局
        labelAlign: 'right',   // 标签右对齐
        labelCol: { span: 6 }, // 标签占6列
        wrapperCol: { span: 18 } // 组件占18列
    }
}

垂直布局

const option = {
    form: {
        layout: 'vertical',  // 垂直布局
        labelAlign: 'left'   // 标签左对齐
    }
}

内联布局

const option = {
    form: {
        layout: 'inline'  // 内联布局，表单项在一行显示
    }
}

标签左对齐

const option = {
    form: {
        layout: 'horizontal',
        labelAlign: 'left',  // 标签左对齐
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
}

隐藏必填标记

const option = {
    form: {
        hideRequiredMark: true  // 隐藏必填字段的红色星号
    }
}

响应式标签布局

const option = {
    form: {
        labelCol: {
            xs: { span: 24 },  // <576px 时标签占满整行
            sm: { span: 12 },  // ≥576px 时标签占一半
            md: { span: 8 },   // ≥768px 时标签占1/3
            lg: { span: 6 }    // ≥992px 时标签占1/4
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 16 },
            lg: { span: 18 }
        }
    }
}

设置表单尺寸

const option = {
    form: {
        size: 'large'  // 可选值: 'small' | 'middle' | 'large'
    }
}

配置布局(row)

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

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

完整配置项: Row props

配置示例

设置栅格间隔

const option = {
    row: {
        gutter: 16  // 设置栅格间隔为16px
    }
}

响应式间隔

const option = {
    row: {
        gutter: {
            xs: 8,   // <576px 时间隔8px
            sm: 16,  // ≥576px 时间隔16px
            md: 24,  // ≥768px 时间隔24px
            lg: 32   // ≥992px 时间隔32px
        }
    }
}

使用 Flex 布局

const option = {
    row: {
        type: 'flex',           // 使用 flex 布局
        justify: 'space-between', // 两端对齐
        align: 'middle'         // 垂直居中
    }
}

配置提交按钮(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

配置示例

基础配置

const option = {
    submitBtn: {
        innerText: '提交',
        type: 'primary',
        block: true,
        show: true
    }
}

自定义按钮文字和样式

const option = {
    submitBtn: {
        innerText: '保存',
        type: 'primary',
        size: 'large',
        icon: 'save'
    }
}

隐藏提交按钮

const option = {
    submitBtn: false  // 或 submitBtn: { show: false }
}

自定义按钮布局

const option = {
    submitBtn: {
        innerText: '提交',
        col: {
            span: 12,  // 按钮占据12列
            offset: 6  // 左侧偏移6列
        }
    }
}

自定义提交事件

const option = {
    submitBtn: {
        innerText: '提交',
        click: (formData, fApi) => {
            console.log('提交数据:', formData)
            // 自定义提交逻辑
            return false  // 返回 false 阻止默认提交
        }
    }
}

设置按钮加载状态

const option = {
    submitBtn: {
        innerText: '提交',
        loading: true  // 按钮显示加载状态
    }
}

配置重置按钮(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

配置示例

显示重置按钮

const option = {
    resetBtn: {
        show: true,
        innerText: '重置',
        type: 'default'
    }
}

自定义重置按钮样式

const option = {
    resetBtn: {
        show: true,
        innerText: '清空',
        type: 'dashed',
        icon: 'reload',
        size: 'large'
    }
}

自定义重置事件

const option = {
    resetBtn: {
        show: true,
        innerText: '重置',
        click: (fApi) => {
            console.log('重置表单')
            // 自定义重置逻辑
            fApi.resetFields()  // 重置表单字段
        }
    }
}

重置按钮和提交按钮并排显示

const option = {
    submitBtn: {
        innerText: '提交',
        col: { span: 12 }
    },
    resetBtn: {
        show: true,
        innerText: '重置',
        col: { span: 12 }
    }
}

悬浮提示框(info)

类型：Object
说明：组件提示消息配置
默认值:

  {
    //提示消息类型,popover,tooltip
    type: "popover",
    placement: 'topLeft',
    icon: 'question-circle-o'
  }

可以在info配置项中设置提示组件的属性

提示组件: Popover_props | Tooltip_props

配置示例

const option = {
    info: {
        type: 'popover',
        placement: 'topLeft',
        icon: 'question-circle-o',
        title: '提示',
        content: '这是字段说明'
    }
}

const option = {
    info: {
        type: 'tooltip',
        placement: 'top',
        icon: 'info-circle-o',
        title: '这是字段说明'
    }
}

自定义提示位置

const option = {
    info: {
        type: 'popover',
        placement: 'right',  // 可选值: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
        icon: 'question-circle-o'
    }
}

自定义提示图标

const option = {
    info: {
        type: 'popover',
        icon: 'exclamation-circle-o',  // 自定义图标
        title: '注意事项',
        content: '请仔细填写此字段'
    }
}

禁用提示

const option = {
    info: false  // 或 info: { show: false }
}

配置 FormItem(wrap)

类型：Object
说明：配置 FormItem 组件的显示规则，例如字段的样式和布局。
完整配置项: FormItem_props

配置示例

全局设置标签和组件布局

const option = {
    wrap: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
}

全局设置字段验证提示位置

const option = {
    wrap: {
        validateStatus: 'error',  // 可选值: 'success' | 'warning' | 'error' | 'validating'
        hasFeedback: true  // 显示验证图标
    }
}

全局设置字段帮助文本

const option = {
    wrap: {
        extra: '这是字段的额外说明信息'
    }
}

全局设置字段标签对齐方式

const option = {
    wrap: {
        labelAlign: 'left'  // 可选值: 'left' | 'right'
    }
}

完整配置示例

const option = {
    // 表单整体配置
    form: {
        layout: 'horizontal',
        labelAlign: 'right',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        size: 'middle'
    },


// 栅格布局配置
    row: {
        gutter: 16
    },


// 提交按钮配置
    submitBtn: {
        innerText: '提交',
        type: 'primary',
        block: true,
        show: true
    },


// 重置按钮配置
    resetBtn: {
        show: true,
        innerText: '重置',
        type: 'default'
    },


// 提示信息配置
    info: {
        type: 'popover',
        placement: 'topLeft',
        icon: 'question-circle-o'
    },


// FormItem 配置
    wrap: {
        hasFeedback: true
    }
}

表单配置 ​

设置表单配置 ​

构成 ​

配置表单(form) ​

配置示例 ​

基础配置 ​

垂直布局 ​

内联布局 ​

标签左对齐 ​

隐藏必填标记 ​

响应式标签布局 ​

设置表单尺寸 ​

配置布局(row) ​

配置示例 ​

设置栅格间隔 ​

响应式间隔 ​

使用 Flex 布局 ​

配置提交按钮(submitBtn) ​

配置示例 ​

基础配置 ​

自定义按钮文字和样式 ​

隐藏提交按钮 ​

自定义按钮布局 ​

自定义提交事件 ​

设置按钮加载状态 ​

配置重置按钮(resetBtn) ​

配置示例 ​

显示重置按钮 ​

自定义重置按钮样式 ​

自定义重置事件 ​

重置按钮和提交按钮并排显示 ​

悬浮提示框(info) ​

配置示例 ​

使用 Popover 提示 ​

使用 Tooltip 提示 ​

自定义提示位置 ​

自定义提示图标 ​

禁用提示 ​

配置 FormItem(wrap) ​

配置示例 ​

全局设置标签和组件布局 ​

全局设置字段验证提示位置 ​

全局设置字段帮助文本 ​

全局设置字段标签对齐方式 ​

完整配置示例 ​

表单配置

设置表单配置

构成

配置表单(form)

配置示例

基础配置

垂直布局

内联布局

标签左对齐

隐藏必填标记

响应式标签布局

设置表单尺寸

配置布局(row)

配置示例

设置栅格间隔

响应式间隔

使用 Flex 布局

配置提交按钮(submitBtn)

配置示例

基础配置

自定义按钮文字和样式

隐藏提交按钮

自定义按钮布局

自定义提交事件

设置按钮加载状态

配置重置按钮(resetBtn)

配置示例

显示重置按钮

自定义重置按钮样式

自定义重置事件

重置按钮和提交按钮并排显示

悬浮提示框(info)

配置示例

使用 Popover 提示

使用 Tooltip 提示

自定义提示位置

自定义提示图标

禁用提示

配置 FormItem(wrap)

配置示例

全局设置标签和组件布局

全局设置字段验证提示位置

全局设置字段帮助文本

全局设置字段标签对齐方式

完整配置示例