快捷表单 · AntDesign

核心 API 请查阅 快捷表单-基础篇，本文档仅说明 AntDesign 框架下的特化配置。

导入路径

import { $initHook, $Input, $Select, $DatePicker } from '@jiess/plus/react';

AntDesign 表单组件映射

Jiess 组件	AntDesign 组件	说明
$Input	Input	文本输入
$InputNumber	InputNumber	数字输入
$Select	Select	下拉选择
$DatePicker	DatePicker	日期选择
$TimePicker	TimePicker	时间选择
$Switch	Switch	开关
$CheckboxGroup	Checkbox.Group	复选框组
$RadioGroup	Radio.Group	单选框组
$TreeSelect	TreeSelect	树形选择
$Cascader	Cascader	级联选择

AntDesign 特有属性

表单布局

{
    $Form: {
        layout: 'horizontal',  // 'horizontal' / 'vertical' / 'inline'
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        size: 'middle',        // 'large' / 'middle' / 'small'
        children: { /* */ },
    },
}

表单项透传属性

$Input({
    $label: '姓名',
    $name: 'name',
    // 以下透传给 antd Input
    placeholder: '请输入姓名',
    allowClear: true,
    maxLength: 50,
    prefix: <UserOutlined />,
});

$Select({
    $label: '状态',
    $name: 'status',
    showSearch: true,        // 可搜索
    mode: 'multiple',        // 多选
    optionFilterProp: 'label',
    onSearch: (val) => fetchOptions(val),
});

注意事项

事项	说明
Form.Item 布局	使用 labelCol/wrapperCol 控制栅格布局
antd Form v4	兼容 Ant Design 4.x（适配层处理了 API 差异）
getPopupContainer	Jiess 内部自动设置弹层挂载节点

实战示例

示例1：用户信息编辑表单 + 校验规则组合

import { $initHook, $Input, $InputNumber, $Select, $DatePicker, $Switch, $RadioGroup } from '@jiess/plus/react';

export default {
    name: {
        $Input: {
            $label: '姓名',
            $rules: [
                { required: true, message: '请输入姓名' },
                { minLen: 2, message: '姓名至少2个字符' },
            ],
            placeholder: '请输入姓名',
            allowClear: true,
            prefix: <UserOutlined />,
        },
    },
    age: {
        $InputNumber: {
            $label: '年龄',
            $rules: [
                { required: true, message: '请输入年龄' },
                { integer: true, message: '必须为整数' },
                { min: 0, message: '年龄不能小于0' },
                { max: 150, message: '年龄不能大于150' },
            ],
            min: 0,
            max: 150,
        },
    },
    email: {
        $Input: {
            $label: '邮箱',
            $rules: [
                { required: true, message: '请输入邮箱' },
                { email: true, message: '请输入正确的邮箱格式' },
            ],
            placeholder: '请输入邮箱',
        },
    },
    phone: {
        $Input: {
            $label: '手机号',
            $rules: [{ phone: true, message: '请输入正确的手机号' }],
            placeholder: '请输入手机号',
        },
    },
    idCard: {
        $Input: {
            $label: '身份证号',
            $rules: [{ card: true, message: '请输入正确的身份证号' }],
            placeholder: '请输入身份证号',
            allowClear: true,
        },
    },
    gender: {
        $RadioGroup: {
            $label: '性别',
            options: [
                { label: '男', value: 'male' },
                { label: '女', value: 'female' },
            ],
        },
    },
    birthday: {
        $DatePicker: {
            $label: '生日',
            placeholder: '请选择日期',
        },
    },
    status: {
        $Select: {
            $label: '状态',
            options: [
                { label: '启用', value: 1 },
                { label: '禁用', value: 0 },
            ],
            showSearch: true,
        },
    },
    active: {
        $Switch: {
            $label: '启用',
            checkedChildren: '开',
            unCheckedChildren: '关',
        },
    },
};

示例2：使用 Form layout 实现不同排列表单

// 水平排列表单（默认）
const horizontalForm = {
    $Form: {
        layout: 'horizontal',
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        children: {
            name: { $Input: { $label: '姓名', $rules: [{ required: true }] } },
            email: { $Input: { $label: '邮箱', $rules: [{ email: true }] } },
        },
    },
};

// 内联排列表单（搜索栏常用）
const inlineForm = {
    $Form: {
        layout: 'inline',
        children: {
            keyword: {
                $Input: {
                    $label: '关键词',
                    placeholder: '请输入搜索关键词',
                    allowClear: true,
                },
            },
            status: {
                $Select: {
                    $label: '状态',
                    options: [{ label: '全部', value: '' }, { label: '启用', value: 1 }, { label: '禁用', value: 0 }],
                },
            },
            $Button: {
                children: '搜索',
                type: 'primary',
                htmlType: 'submit',
            },
        },
    },
};

示例3：弹框内嵌表单（编辑场景）

dialog.open({
    title: '编辑用户信息',
    width: 600,
    render: {
        $Form: {
            layout: 'vertical',
            children: {
                name: {
                    $Input: {
                        $label: '姓名',
                        $rules: [{ required: true, message: '请输入姓名' }],
                        placeholder: '请输入姓名',
                    },
                },
                email: {
                    $Input: {
                        $label: '邮箱',
                        $rules: [
                            { required: true, message: '请输入邮箱' },
                            { email: true, message: '邮箱格式不正确' },
                        ],
                    },
                },
                role: {
                    $Select: {
                        $label: '角色',
                        $rules: [{ required: true, message: '请选择角色' }],
                        options: [
                            { label: '管理员', value: 'admin' },
                            { label: '编辑者', value: 'editor' },
                            { label: '查看者', value: 'viewer' },
                        ],
                        showSearch: true,
                    },
                },
            },
        },
    },
    footer: {
        $Button: {
            children: '取消',
            onClick: () => dialog.close(),
        },
        $Button: {
            children: '确定',
            type: 'primary',
            onClick: () => {
                // formRef.validateFields().then(values => { ... })
                dialog.close();
            },
        },
    },
});

下一步

• 快捷表单-基础篇 — 表单核心 API + 14 条校验规则