开源Vue组件FormCreate通过 JSON 生成AntdvNext表单

_xaboy2026-05-23 9:16

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。它支持 7 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20+ 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

文档 | GitHub | Gitee

使用 npm 安装

通过 npm 安装可以更好地与现代构建工具（如 Webpack）集成。

sh 复制代码 
npm i @form-create/antdv-next@^3
npm i antdv-next

引入和挂载

js 复制代码 
// 引入 form-create 组件库
import formCreate from '@form-create/antdv-next';
import Antdv from 'antdv-next';
import 'antdv-next/dist/reset.css';
// 创建 Vue 应用
const app = Vue.createApp({});
app.use(formCreate);
app.use(Antdv)
app.mount('#app');

高级版FormCreate表单设计器强势登场,让表单设计更简单

CDN 引入

可从 npm CDN 获取 @form-create/antdv-next 的打包文件。请先安装并在应用中挂载 antdv-next（含样式），再在同页或模块中加载 FormCreate；日期类组件通常还需 Day.js，请一并引入。

html 复制代码 
<link href="https://unpkg.com/antdv-next/dist/reset.css" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/dayjs"></script>
<!-- 按 antdv-next 文档挂载组件库后再引入 -->
<script src="https://unpkg.com/@form-create/antdv-next@^3/dist/form-create.min.js"></script>

组件挂载方式

创建表单

rule 复制代码 
const rule = [
    { type: 'input', field: 'goods_name', title: '商品名称', value: 'form-create' },
    {
        type: 'select',
        field: 'category',
        title: '分类',
        value: 'digital',
        options: [
            { label: '数码', value: 'digital' },
            { label: '家居', value: 'home' },
        ],
    },
    { type: 'switch', field: 'enabled', title: '上架', value: true },
    {
        type: 'checkbox',
        field: 'label',
        title: '标签',
        value: [0, 1],
        options: [
            { label: '好用', value: 0 },
            { label: '快速', value: 1 },
            { label: '高效', value: 2 },
            { label: '全能', value: 3 },
        ],
    },
];
const option = {
    form: {
        layout: 'horizontal',
        labelAlign: 'right',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    },
    row: { gutter: 16 },
    submitBtn: { show: true, innerText: '提交' },
    resetBtn: { show: true, innerText: '重置' },
};
vue 复制代码 
<template>
    <form-create :rule="rule" v-model:api="api" v-model="formData" :option="options" @submit="handleSubmit" />
</template>
<script setup>
    import { ref } from 'vue';
    const api = ref({});
    const formData = ref({});
    const handleSubmit = (formData) => {
        alert(JSON.stringify(formData));
    };
    const options = ref({
        resetBtn: true,
    });
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称',
            value: 'form-create',
        },
        {
            type: 'checkbox',
            field: 'label',
            title: '标签',
            value: [0, 1, 2, 3],
            options: [
                { label: '好用', value: 0 },
                { label: '快速', value: 1 },
                { label: '高效', value: 2 },
                { label: '全能', value: 3 },
            ],
        },
    ]);
</script>

AutoComplete 自动补全输入框

基础示例

js 复制代码 
const rule = {
    type: "autoComplete",
    title: "自动完成",
    field: "auto",
    value: "xaboy",
    props: {
        options: [{ value: "xaboy" }],
        placeholder: "请输入"
    }
}

Props 配置示例

支持清除 + 受控展开
js 复制代码 
const rule = {
    type: "autoComplete",
    title: "自动完成",
    field: "auto",
    value: "",
    props: {
        allowClear: true,
        open: true,
        options: [{ value: "a" }, { value: "b" }],
        placeholder: "请输入"
    }
}
搜索联动动态更新 options
js 复制代码 
const rule = {
    type: "autoComplete",
    title: "自动完成",
    field: "auto",
    value: "",
    inject: true,
    props: {
        options: [],
        placeholder: "请输入关键字"
    },
    on: {
        search: (inject, value) => {
            inject.self.props.options = !value
                ? []
                : [{ value }, { value: value + value }, { value: value + value + value }]
        }
    }
}
整段禁用
js 复制代码 
const rule = {
    type: "autoComplete",
    title: "历史词（禁用）",
    field: "hist_locked",
    value: "antd",
    props: {
        disabled: true,
        options: [{ value: "antd" }],
        placeholder: "不可编辑",
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const rule = [
    {
        type: "autoComplete",
        title: "关键字（小）",
        field: "kw_sm",
        value: "",
        props: {
            size: "small",
            allowClear: true,
            placeholder: "小尺寸",
            options: [],
        },
    },
    {
        type: "autoComplete",
        title: "关键字（中）",
        field: "kw_default",
        value: "",
        props: {
            size: "middle",
            allowClear: true,
            placeholder: "默认尺寸",
            options: [],
        },
    },
    {
        type: "autoComplete",
        title: "关键字（大）",
        field: "kw_lg",
        value: "",
        props: {
            size: "large",
            allowClear: true,
            placeholder: "大尺寸",
            options: [],
        },
    },
]

Cascader 级联选择器

基础示例

js 复制代码 
const rule = {
    type: "cascader",
    title: "所在区域",
    field: "address",
    value: ["陕西省", "西安市", "新城区"],
    props: {
        options: [
            {
                value: "beijing",
                label: "北京",
                children: [
                    { value: "gugong", label: "故宫" },
                    { value: "tiantan", label: "天坛" },
                ],
            },
            {
                value: "jiangsu",
                label: "江苏",
                children: [
                    {
                        value: "nanjing",
                        label: "南京",
                        children: [{ value: "fuzimiao", label: "夫子庙" }],
                    },
                ],
            },
        ],
    },
}

Props 配置示例

可搜索
js 复制代码 
const rule = {
    type: "cascader",
    title: "所在区域",
    field: "address",
    props: {
        options: [
            {
                value: "bj",
                label: "北京",
                children: [{ value: "gg", label: "故宫" }],
            },
        ],
        showSearch: true,
        placeholder: "请选择或搜索区域",
    },
}
任意一级可选（changeOnSelect）
js 复制代码 
const rule = {
    type: "cascader",
    title: "商品分类",
    field: "category",
    props: {
        options: [
            {
                value: "a",
                label: "电子产品",
                children: [
                    { value: "phone", label: "手机" },
                    { value: "pc", label: "电脑" },
                ],
            },
        ],
        changeOnSelect: true,
        placeholder: "可选择任意级别",
    },
}
整段禁用
js 复制代码 
const rule = {
    type: "cascader",
    title: "固定区域（禁用）",
    field: "region_locked",
    value: ["bj", "gg"],
    props: {
        disabled: true,
        options: [
            {
                value: "bj",
                label: "北京",
                children: [{ value: "gg", label: "故宫" }],
            },
        ],
        placeholder: "不可修改",
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const cascSizeOpts = [
    {
        value: "zj",
        label: "浙江",
        children: [{ value: "hz", label: "杭州" }],
    },
]

const rule = [
    {
        type: "cascader",
        title: "区域（小）",
        field: "region_sm",
        props: {
            size: "small",
            allowClear: true,
            placeholder: "小尺寸",
            options: cascSizeOpts,
        },
    },
    {
        type: "cascader",
        title: "区域（中）",
        field: "region_default",
        props: {
            size: "middle",
            allowClear: true,
            placeholder: "默认尺寸",
            options: cascSizeOpts,
        },
    },
    {
        type: "cascader",
        title: "区域（大）",
        field: "region_lg",
        props: {
            size: "large",
            allowClear: true,
            placeholder: "大尺寸",
            options: cascSizeOpts,
        },
    },
]

Checkbox 多选框

基础示例

js 复制代码 
const rule = {
    type: "checkbox",
    title: "标签",
    field: "label",
    value: ["1", "2"],
    options: [
        { value: "1", label: "好用", disabled: true },
        { value: "2", label: "方便", disabled: false },
        { value: "3", label: "实用", disabled: false },
    ],
    props: {},
}

Props 配置示例

整组禁用
js 复制代码 
const rule = {
    type: "checkbox",
    title: "标签",
    field: "label",
    value: [],
    options: [
        { value: "a", label: "选项 A" },
        { value: "b", label: "选项 B" },
    ],
    props: {
        disabled: true,
    },
}

ColorPicker 颜色选择器

基础示例

js 复制代码 
const rule = {
    type: "colorPicker",
    title: "主题色",
    field: "color",
    value: "#1677ff",
    props: {
        showText: true,
    },
}

Props 配置示例

渐变模式 / 预设色
js 复制代码 
const rule = {
    type: "colorPicker",
    title: "颜色",
    field: "color",
    props: {
        mode: ["single", "gradient"],
        presets: [
            { label: "推荐", colors: ["#1677ff", "#52c41a"] },
        ],
    },
}
禁用
js 复制代码 
const rule = {
    type: "colorPicker",
    title: "品牌主色（禁用）",
    field: "color_locked",
    value: "#1677ff",
    props: {
        showText: true,
        disabled: true,
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const rule = [
    {
        type: "colorPicker",
        title: "主题色（小）",
        field: "color_sm",
        value: "#52c41a",
        props: {
            showText: true,
            size: "small",
        },
    },
    {
        type: "colorPicker",
        title: "主题色（中）",
        field: "color_default",
        value: "#52c41a",
        props: {
            showText: true,
            size: "middle",
        },
    },
    {
        type: "colorPicker",
        title: "主题色（大）",
        field: "color_lg",
        value: "#52c41a",
        props: {
            showText: true,
            size: "large",
        },
    },
]

DatePicker 日期选择器

基础示例（日期）

js 复制代码 
const rule = {
    type: "datePicker",
    title: "活动日期",
    field: "section_day",
    value: "2020-04-04",
    props: {},
}

Props 配置示例

按粒度：周 / 月 / 季度 / 年
js 复制代码 
// 周
const week = {
    type: "datePicker",
    title: "周",
    field: "section_day2",
    value: "2026-20th",
    props: { picker: "week" },
}

// 月
const month = {
    type: "datePicker",
    title: "月",
    field: "section_day3",
    value: "2020-04",
    props: { picker: "month" },
}

// 季度（4.1.0+）
const quarter = {
    type: "datePicker",
    title: "季度",
    field: "section_day4",
    value: "2020-q4",
    props: { picker: "quarter" },
}

// 年
const year = {
    type: "datePicker",
    title: "年",
    field: "section_day5",
    value: "2020",
    props: { picker: "year" },
}
日期区间（RangePicker）
js 复制代码 
const rule = {
    type: "datePicker",
    title: "日期区间",
    field: "section_day6",
    value: ["2018-02-02", "2026-02-02"],
    props: {
        picker: "date",
        range: true,
    },
}
日期时间区间
js 复制代码 
const rule = {
    type: "datePicker",
    title: "日期时间区间",
    field: "section_day7",
    value: ["2018-02-02 12:12:12", "2026-02-02 23:23:23"],
    props: {
        showTime: true,
        range: true,
    },
}
多选日期（不支持 showTime）
js 复制代码 
const rule = {
    type: "datePicker",
    title: "日期多选",
    field: "section_day8",
    value: ["2018-02-02", "2026-02-02"],
    props: {
        multiple: true,
    },
}
整段禁用
js 复制代码 
const rule = {
    type: "datePicker",
    title: "活动日期（禁用）",
    field: "day_locked",
    value: "2024-06-01",
    props: {
        disabled: true,
        format: "YYYY-MM-DD",
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const rule = [
    {
        type: "datePicker",
        title: "活动日期（小）",
        field: "day_sm",
        value: null,
        props: {
            size: "small",
            allowClear: true,
            format: "YYYY-MM-DD",
            placeholder: "小尺寸",
        },
    },
    {
        type: "datePicker",
        title: "活动日期（中）",
        field: "day_default",
        value: null,
        props: {
            size: "middle",
            allowClear: true,
            format: "YYYY-MM-DD",
            placeholder: "默认尺寸",
        },
    },
    {
        type: "datePicker",
        title: "活动日期（大）",
        field: "day_lg",
        value: null,
        props: {
            size: "large",
            allowClear: true,
            format: "YYYY-MM-DD",
            placeholder: "大尺寸",
        },
    },
]

Input

基础示例
js 复制代码 
const rule = {
    type: "input",
    title: "商品名称",
    field: "goods_name",
    value: "iphone",
    props: {
        placeholder: "请输入商品名称",
        disabled: false,
        allowClear: true,
    },
}
整段禁用
js 复制代码 
const rule = {
    type: "input",
    title: "订单号（禁用）",
    field: "order_no",
    value: "NO-20260101",
    props: {
        disabled: true,
        allowClear: false,
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const rule = [
    {
        type: "input",
        title: "备注（小）",
        field: "note_sm",
        props: {
            placeholder: "小尺寸",
            size: "small",
            allowClear: true,
        },
    },
    {
        type: "input",
        title: "备注（中）",
        field: "note_default",
        props: {
            placeholder: "默认尺寸",
            size: "middle",
            allowClear: true,
        },
    },
    {
        type: "input",
        title: "备注（大）",
        field: "note_lg",
        props: {
            placeholder: "大尺寸",
            size: "large",
            allowClear: true,
        },
    },
]

InputNumber 数字输入框

基础示例

js 复制代码 
const rule = {
    type: "inputNumber",
    title: "排序",
    field: "sort",
    value: 0,
    props: {
        step: 0.1,
        precision: 2,
    },
}

Props 配置示例

最大最小与步长
js 复制代码 
const rule = {
    type: "inputNumber",
    title: "数量",
    field: "qty",
    value: 1,
    props: {
        min: 0,
        max: 100,
        step: 1,
    },
}
整段禁用
js 复制代码 
const rule = {
    type: "inputNumber",
    title: "固定值（只读）",
    field: "locked",
    value: 8,
    props: {
        min: 0,
        max: 99,
        disabled: true,
    },
}
尺寸对比（小 / 中 / 大）
js 复制代码 
const rule = [
    {
        type: "inputNumber",
        title: "数量（小）",
        field: "qty_sm",
        value: 2,
        props: {
            min: 1,
            max: 10,
            size: "small",
        },
    },
    {
        type: "inputNumber",
        title: "数量（中）",
        field: "qty_default",
        value: 2,
        props: {
            min: 1,
            max: 10,
            size: "middle",
        },
    },
    {
        type: "inputNumber",
        title: "数量（大）",
        field: "qty_lg",
        value: 2,
        props: {
            min: 1,
            max: 10,
            size: "large",
        },
    },
]

Radio 单选框

基础示例

js 复制代码 
const rule = {
    type: "radio",
    title: "是否包邮",
    field: "is_postage",
    value: "0",
    options: [
        { value: "0", label: "不包邮", disabled: false },
        { value: "1", label: "包邮", disabled: false },
        { value: "2", label: "未知", disabled: true },
    ],
}

Props 配置示例

按钮样式
js 复制代码 
const rule = {
    type: "radio",
    title: "是否包邮",
    field: "is_postage",
    value: "0",
    options: [
        { value: "0", label: "否" },
        { value: "1", label: "是" },
    ],
    props: {
        optionType: "button",
        buttonStyle: "solid",
    },
}
整组禁用
js 复制代码 
const rule = {
    type: "radio",
    title: "活动类型（只读）",
    field: "act_ro",
    value: "a",
    options: [
        { value: "a", label: "满减" },
        { value: "b", label: "折扣" },
    ],
    props: {
        disabled: true,
    },
}
按钮样式 · 尺寸对比（小 / 中 / 大）
js 复制代码 
const skuOpts = [
    { value: "s", label: "S" },
    { value: "m", label: "M" },
    { value: "l", label: "L" },
]

const rule = [
    {
        type: "radio",
        title: "规格（按钮·小）",
        field: "sku_sm",
        value: "m",
        options: skuOpts,
        props: {
            optionType: "button",
            size: "small",
        },
    },
    {
        type: "radio",
        title: "规格（按钮·中）",
        field: "sku_default",
        value: "m",
        options: skuOpts,
        props: {
            optionType: "button",
            size: "middle",
        },
    },
    {
        type: "radio",
        title: "规格（按钮·大）",
        field: "sku_lg",
        value: "m",
        options: skuOpts,
        props: {
            optionType: "button",
            size: "large",
        },
    },
]

Select 下拉选择框

基础示例（单选）

js 复制代码 
const rule = {
    type: "select",
    title: "产品分类",
    field: "cate_id",
    value: "104",
    options: [
        { value: "104", label: "生态蔬菜", disabled: false },
        { value: "105", label: "新鲜水果105", disabled: false },
    ],
}

Props 配置示例

多选
js 复制代码 
const rule = {
    type: "select",
    title: "多选",
    field: "cate_id2",
    value: ["104", "105"],
    props: {
        mode: "multiple",
    },
    options: [
        { value: "104", label: "生态蔬菜" },
        { value: "105", label: "新鲜水果105" },
    ],
}
标签模式（tags）
js 复制代码 
const rule = {
    type: "select",
    title: "标签",
    field: "cate_id3",
    value: ["104", "105"],
    props: {
        mode: "tags",
    },
    options: [
        { value: "104", label: "生态蔬菜" },
        { value: "105", label: "新鲜水果105" },
    ],
}
整段禁用
js 复制代码 
const rule = {
    type: "select",
    title: "分类（禁用）",
    field: "cate_locked",
    value: "104",
    props: {
        disabled: true,
    },
    options: [
        { value: "104", label: "生态蔬菜" },
        { value: "105", label: "新鲜水果105" },
    ],
}
可清空单选
js 复制代码 
const rule = {
    type: "select",
    title: "分类（可清空）",
    field: "cate_clear",
    value: undefined,
    props: {
        allowClear: true,
        placeholder: "请选择分类",
    },
    options: [
        { value: "201", label: "A 类" },
        { value: "202", label: "B 类" },
    ],
}
小号 + 加载态
js 复制代码 
const rule = {
    type: "select",
    title: "异步数据（演示）",
    field: "cate_async",
    value: undefined,
    props: {
        size: "small",
        loading: true,
        placeholder: "加载中...",
    },
    options: [],
}
相关推荐
C+-C资深大佬1 小时前
变量作用域（通俗 + 清晰讲解，适合编程入门）
前端·javascript·vue.js
DogDaoDao1 小时前
【GitHub】AgentMemory 深度解析：让 AI 编程代理拥有持久化记忆的 16K+ Star 开源方案
人工智能·开源·大模型·github·aigc·ai编程·aiagent
m0_737246981 小时前
QDKT6-6搜索类产品开源项目拆解报告路演 + 点评
开源
弹简特1 小时前
【Vue3速成】02-vue工程化目录结构+执行原理
前端·vue.js·npm
_codemonster1 小时前
JSP 、Thymeleaf 、 JavaScript 和Vue
java·javascript·vue.js
杖雍皓1 小时前
Markstream-VUE：构建高性能流式 Markdown 渲染器
前端·javascript·vue.js·markdown·流式输出
FlagOS智算系统软件栈1 小时前
众智FlagOS完成腾讯混元MT2多语翻译模型全系列多芯片适配：英伟达/华为/平头哥三芯开箱即用
开发语言·人工智能·开源
Juicedata2 小时前
降低数据存储成本：JuiceFS v1.4 分层存储设计解析
人工智能·开源
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？04【AI】2026 年具身智能模型和世界模型总结05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08几个好用的ip纯净度检测网站09用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比10codex app每次打开重连5次Reconnecting问题解决