表单配置文档

本文档提供了可用的表单组件及其配置选项的详细信息。

基础组件

输入框 (finput)

基础文本输入框配置。

{
    'type': 'input',
    'label': '字段标签'
}

多行文本框 (ftext)

多行文本输入框。

{
    'type': 'textarea',
    'label': '字段标签'
}

单选框 (fradio)

单选按钮组。

{
    type: 'radio',
    label: '字段标签',
    isOptions: true,
    options: [
        {
            "text": '选项1',
            "value": value1
        },
        {
            "text": '选项2',
            "value": value2
        }
    ]
}

时间选择器 (ftime)

可自定义时间间隔的时间选择组件。

{
    'type': 'time',
    'label': '字段标签',
    'attrs': {
        'pickerOptions': {
            start: '00:30',
            step: '00:30',
            end: '24:00'
        }
    }
}

日期时间选择器 (fdatetime)

日期和时间选择组件。

{
    'type': 'datetime',
    'label': '字段标签',
    'attrs': {
        'valueFormat': 'yyyy-MM-dd HH:mm:ss'
    }
}

图片上传 (fimageup)

支持多文件上传的图片上传组件。

{
    'label': '字段标签',
    'type': 'image-uploader',
    'attrs': {
        'multiple': true,
        'limit': 3
    }
}

富文本编辑器 (fedit)

富文本编辑组件。

{
    'type': 'fire-editor',
    'label': '字段标签'
}

高级组件

树形选择器 - 单级 (fselect1)

单级树形选择组件。

{
    pcate: {
        label: '字段标签',
        type: 'tree-select',
        attrs: {
            multiple: false,
            clearable: true
        },
        options: async data => {
            const res = await apiFunction(0)
            const arr = [{
                id: 0,
                label: '默认标签'
            }]
            return arr.concat(res.data)
        }
    }
}

树形选择器 - 二级 (fselect2)

二级层级树形选择组件。

{
    ccate: {
        label: '字段标签',
        type: 'tree-select',
        attrs: {
            multiple: false,
            clearable: true
        },
        vif: data => data.parentField,
        optionsLinkageFields: ['parentField'],
        options: async data => {
            if (data.pcate) {
                const res = await apiFunction()
                const arr = [{
                    id: 0,
                    label: '默认标签'
                }]
                return arr.concat(res.data)
            }
        }
    }
}

使用说明

  1. 所有组件都需要 label 属性来显示字段标签
  2. 带有 attrs 属性的组件可以通过附加属性进行自定义
  3. 树形选择组件支持异步数据加载
  4. 图片上传组件支持多文件上传，可配置上传限制
  5. 时间选择器允许自定义时间间隔和范围
  6. 富文本编辑器提供高级文本格式化功能

最佳实践

  1. 始终为表单字段提供有意义的标签
  2. 为每种字段类型使用适当的验证规则
  3. 考虑使用 vif 进行字段的条件渲染
  4. 为异步操作实现适当的错误处理
  5. 为文件上传设置适当的限制
  6. 使用清晰一致的字段ID命名约定

组件属性说明

通用属性

  • type: 组件类型
  • label: 字段标签
  • attrs: 组件特定属性

特殊属性

  • isOptions: 是否使用选项配置（用于单选框等）
  • options: 选项数据配置
  • vif: 条件渲染函数
  • optionsLinkageFields: 联动字段配置
  • multiple: 是否支持多选
  • clearable: 是否可清除
  • limit: 上传限制数量

注意事项

  1. 在使用树形选择器时，确保正确配置数据源和联动关系
  2. 图片上传组件建议设置合理的文件大小和数量限制
  3. 时间选择器的时间间隔要根据实际业务需求配置
  4. 富文本编辑器使用时注意内容安全过滤
  5. 异步加载数据时做好加载状态和错误处理