好用的低代码可视化表单设计器 FcDesigner 是一款基于 Vue 的开源工具（设计器项目名 form-create-designer），通过数据驱动表单渲染。可以拖拽生成表单规则，再由配套渲染器 form-create 加载 JSON 并渲染。面向政务、OA、ERP、电商、流程管理里要做动态表单的开发者和业务配置同学。

审批单画完要入库、刷新后还得回到同一张画布、OA 里审批详情页还要用同一份 JSON 渲染——这些都是保存和回显。FcDesigner 把设计结果收成两段数据：规则 

，两段都是 JSON 字符串。嵌进 OA 用自己的工具栏时，调用 

截图是设计器顶部工具栏：导入、导出旁边有绿色的「保存」，红箭头指着它，后面是「预览」「清空」。这是把 

 之后才会出现的内置保存按钮。点「保存」会触发 

 事件。点「预览」只是按当前画布渲染出表单，不会自动发保存请求。

FcDesigner 保存表单为什么必须用 toJson 和 parseJson？

规则里不只是普通对象，还可能带设计器自己的结构。用浏览器自带的 

 转出来的字符串，回显时格式会对不上。保存用 

 引入，和设计器、渲染器是同一套。

设计器实例上和保存、回显直接相关的方法（调用前要等组件初始化完成，写在 

// 设置 / 读取规则
type SetRule = (rule: string | Rule[]) => void
type GetRule = () => Rule[]
type GetJson = () => string

// 设置 / 读取配置；setOption 别名 setOptions，getOption 别名 getOptions
type SetOption = (opt: Options) => void
type GetOption = () => Options
type GetOptionsJson = () => string


 已经是 JSON 字符串。本课保存示例按官方写法：先 

。回显不要把接口返回的字符串直接 

接口字段名官方示例里有两套，对接时按你们的后端映射即可：

怎么显示内置保存按钮 showSaveBtn？审批单怎么 POST 保存？

 审批单配置页。业务同学拖完字段，希望在设计器顶部看到保存按钮，先不用自己画工具栏。

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        showSaveBtn: true
    }
</script>


预览后：工具栏出现绿色「保存」。此时还没有监听 

，点保存不会发接口，但按钮已经在了。「预览」打开的是当前画布对应的表单，和保存是两件事。

再一个示例：@save 把 rule/options POST 到 /api/saveForm

 录入页的表单模板要入库。业务同学点顶部「保存」，把当前规则和配置交给后端。

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"/>
</template>
<script setup>
    import axios from 'axios'

    const config = {
        showSaveBtn: true
    }

    function handleSave ({rule, options}) {
        axios.post('/api/saveForm', {
            rules: rule, //JSON字符串
            options: options //JSON字符串
        }).then(response => {
            console.log('表单保存成功', response.data)
        }).catch(error => {
            console.error('表单保存失败', error)
        })
    }
</script>


预览后：点绿色「保存」，发出 POST 

 是两段 JSON 字符串。成功会在控制台看到「表单保存成功」。把 

 换成你们的模板保存地址，字段名按上表映射。

嵌进 OA 时怎么用自己的保存按钮 toJson？

基本示例：自己的按钮 + toJson(getRule()) / toJson(getOptions())

 设计器嵌进 OA。页面顶部已经有业务自己的工具栏，不能靠设计器内置保存按钮，要点 OA 里那颗「保存」。

<template>
    <fc-designer ref="designer"/>
    <el-button @click="save">保存</el-button>
</template>
<script setup>
    import {ref} from 'vue'
    import axios from 'axios'
    import {formCreate} from '@form-create/designer'

    const designer = ref(null)

    function save() {
        axios.post('/api/saveForm', {
            rules: formCreate.toJson(designer.value.getRule()), //JSON字符串
            options: formCreate.toJson(designer.value.getOptions()), //JSON字符串
        }).then(response => {
            console.log('保存成功')
        })
    }
</script>


预览后：点你自己的「保存」，发出的 POST 和上一节同一条 

，两段也是 JSON 字符串。差别是数据从实例方法取，再 

。按钮要点在组件已经渲染出来之后，初始化完成前不要调这些方法。

刷新后怎么 setRule 回显？审批详情页怎么 parseJson？

基本示例：刷新回显 setRule + setOptions + parseJson

 审批单配置页刷新或下次再打开，画布要回到上次保存的样子，业务同学接着改，而不是空白设计器。

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"/>
</template>
<script setup>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {formCreate} from '@form-create/designer'

    const designer = ref(null)
    const config = {
        showSaveBtn: true
    }

    function handleSave ({rule, options}) {
        axios.post('/api/saveForm', {
            rules: rule, //JSON字符串
            options: options //JSON字符串
        })
    }

    onMounted(async () => {
        try {
            const { data } = await axios.get('/api/getForm')
            const { ruleJson, optionsJson } = data
            designer.value.setOptions(formCreate.parseJson(optionsJson))
            designer.value.setRule(formCreate.parseJson(ruleJson))
        } catch (error) {
            console.error('加载表单数据失败', error)
        }
    })
</script>


预览后：组件挂载结束就会去拉 

 里的表单。点「预览」看到的就是这份规则渲染出来的结果。接口如果沿用保存时的 

 字段，读取时改成你们实际的键名即可，不要假定一定叫 

再一个示例：运行时 form-create 加载同一份 JSON

 审批详情页。填表人看不到设计器，只要把已经保存的规则渲染成可填的表单，提交的是字段值，不是再存一份设计 JSON。

 引入；应用启动时挂载一次即可：

import {formCreate} from '@form-create/designer'
app.use(formCreate)


<template>
    <div id="app">
        <form-create
            v-if="rule.length"
            v-model="formData"
            v-model:api="api"
            @submit="handleSubmit"
            :rule="rule"
            :option="option"
        ></form-create>
    </div>
</template>
<script setup>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {formCreate} from '@form-create/designer'

    const rule = ref([])
    const option = ref({})
    const api = ref(null)
    const formData = ref({})

    function handleSubmit(formData) {
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('提交成功:', response.data)
            })
            .catch(error => {
                console.error('提交失败:', error)
            })
    }

    onMounted(() => {
        axios.get('/api/getFormRules')
            .then(response => {
                const {ruleJson, optionsJson, formData: initFormData} = response.data
                rule.value = formCreate.parseJson(ruleJson)
                option.value = formCreate.parseJson(optionsJson)
                formData.value = initFormData || {}
            })
            .catch(error => {
                console.error('加载表单规则失败:', error)
            })
    })
</script>


预览后：详情页渲染的是保存过的那份规则。提交发出 POST 

），详情页提交的是填写结果，两套接口不要混。没有 

 先空对象，等用户填；编辑已有记录时，key 必须对上 

Q: 为什么不能用 JSON.stringify / JSON.parse？

 已经是 JSON 字符串，POST 时原样放入 

formCreate.toJson(designer.value.getRule())

formCreate.toJson(designer.value.getOptions())

Q: @save 的 rule 和 POST 的 rules、GET 的 ruleJson 是什么关系？

，两段 JSON 字符串。官方保存接口 body 写成 

。后端可以统一命名，前端按实际字段做映射，不要三种名字混在一次请求里。

Q: setRule、getRule 什么时候能调？内置保存和自己的按钮怎么选？

，参数已经是字符串。嵌进 OA、工具栏是自己的：不依赖 

 也能拿到 JSON 字符串；本课示例按官方用 

Q: 设计器回显和审批详情页渲染有什么不同？

setOptions(formCreate.parseJson(optionsJson))

，之后还能继续拖改，点「预览」看效果。详情页不挂设计器，用 

<form-create v-if="rule.length" v-model="formData" v-model:api="api" :rule="rule" :option="option">

 一致。保存的是模板 JSON，提交的是填写值，不要把 

开源 JSON 表单设计器 FcDesigner：toJson 保存与 parseJson 回显实战

FcDesigner 保存与回显教程：用 toJson/parseJson 保存和回显表单 JSON，覆盖 showSaveBtn 内置保存、OA 自定义按钮保存、刷新回显与审批详情页渲染。

人工智能

FcDesigner是一款基于Vue的开源低代码可视化表单设计器，通过拖拽生成表单规则，配合form-create渲染器加载JSON实现动态表单。支持表单保存与回显，使用formCreate.toJson/parseJson进行数据转换，适用于政务、OA、ERP等场景。内置保存按钮通过showSaveBtn配置，支持@save事件及自定义工具栏，满足审批单入库、详情页渲染等需求。

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

FcDesigner是一款基于Vue的开源低代码可视化表单设计器，通过拖拽生成表单规则，配合form-create渲染器加载JSON实现动态表单。支持表单保存与回显，使用formCreate.toJson/parseJson进行数据转换，适用于政务、OA、ERP等场景。内置保存按钮通过showSaveBtn配置，支持@...

开源 JSON 表单设计器 FcDesigner：toJson 保存与 parseJson 回显实战

开源 JSON 表单设计器 FcDesigner：toJson 保存与 parseJson 回显实战

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐