jquery 2023-12-10 18:59

f-render | 基于 ElementUI 的表单设计器

交流群介绍注意特性 Demo 教程 1 分钟快速接入第 1 步：安装第 2 步：注册第 3 步：使用用户模式基于 f-render 的配置基于 vue-ele-form 的配置定制化新增官方扩展组件（以富文本扩展为例）安装组件注册组件配置属性新增自定义组件创建组件并全局注册书写配置合并配置并传入定制化原组件配置 & 表单配置定制化右侧 Tabs 样式定制化二次开发 f-render 问答集锦 Props 说明插槽生态特别感谢赞助者 Contributors 介绍

f-render 是基于 vue-ele-form 开发的可视化表单设计工具, 适用于各种流程引擎和动态表单项目，大大节省你的开发时间；

注意

注意，此设计器不是独立存在的，是依托于 vue-ele-form，在使用前请务必阅读 vue-ele-form 的文档。

特性组件方式：以组件方式接入，1 分钟轻松接入；体积小：Gzip 压缩后 100k 左右；易扩展：可以在不更改源码的情况下增删改属性、组件； Demo

https://dream2023.gitee.io/f-render/

教程

虽然 f-render 可以做到在不更改源码的情况下实现大量的定制化，但是依然有不少人希望能够根据公司的需求进行二次开发。

所以我推出了一个从 0 实现整个项目的教程，如果感兴趣 f-render 的实现过程和思考，可以点击从 0 实现可视化表单组件进行学习。

1 分钟快速接入第 1 步：安装

yarn add element-ui # npm install element-ui -S yarn add vue-ele-form # npm install vue-ele-form -S yarn add f-render # npm install f-render -S 第 2 步：注册

// vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd import EleForm from "vue-ele-form"; import FRender from "f-render"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI); Vue.use(EleForm); Vue.component("f-render", FRender); 第 3 步：使用

<template> <f-render @save="handleSave" :loading="loading" height="calc(100vh - 60px)" :config="formConfig" /> </template> <script> export default { data() { return { loading: false, formConfig: {} }; }, methods: { handleSave(res) { // 这里是保存到 localStorage，你可以保存到服务器 localStorage.setItem("form-config", res); this.$message.success("保存成功啦~"); } }, mounted() { // 模拟异步加载 this.loading = true; setTimeout(() => { this.loading = false; this.formConfig = localStorage.getItem("form-config") || ""; }, 1000); } }; </script> 用户模式

我们把动态表单分为两个阶段：

首先是设计阶段：通过拖拽设计表单；然后是用户阶段：将设计好的表单以纯表单的形式让用户填写。

我们别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置我们已经讲了，下面看用户模式下的表单配置：

基于 f-render 的配置

通过属性 pure, 可以直接做为表单使用，其数据提交方式同 vue-ele-form 一样，具体可查看文档。

<template> <f-render v-model="formData" :request-fn="handleSubmit" @request-success="handleSuccess" :config="formConfig" pure /> </template> <script> export default { data() { return { formData: {}, formConfig: "" }; }, methods: { handleSubmit(data) { // eslint-disable-next-line no-console console.log(data); return Promise.resolve(); }, handleSuccess() { this.$message.success("创建成功"); } }, mounted() { // 模拟异步加载 this.loading = true; setTimeout(() => { this.loading = false; this.formConfig = localStorage.getItem("form-config") || ""; }, 1000); } }; </script> 基于 vue-ele-form 的配置

如果你的可视化设计和表单使用，不再一个系统，可以直接使用 vue-ele-form，不必安装 f-render，具体如下：

<template> <ele-form v-model="formData" :request-fn="handleSubmit" @request-success="handleSuccess" v-if="formConfig" v-bind="formConfig" /> </template> <script> export default { data() { return { formData: {}, formConfig: null }; }, methods: { handleSubmit(data) { // eslint-disable-next-line no-console console.log(data); return Promise.resolve(); }, handleSuccess() { this.$message.success("创建成功"); } }, mounted() { // 模拟异步加载 setTimeout(() => { try { // 这里必须对字符串进行反序列化 this.formConfig = eval(`(${localStorage.getItem("form-config")})`); } catch { this.$message.error("数据解析失败"); } }, 1000); } }; </script> 定制化新增官方扩展组件（以富文本扩展为例）安装组件

yarn add vue-ele-form-quill-editor 注册组件

Vue.component("quill-editor", EleFormQuillEditor); 配置属性

<template>  <f-render :comps="comps" /> </template> <script> // 默认配置 import comps from "f-render/src/fixtures/comps"; // 富文本配置 import quillEditor from "f-render/src/fixtures/extends/quill-editor"; // 可以更改显示组件位置，默认为 10 // 这里更改为 2，显示更靠前 quillEditor.sort = 2; export default { data() { return { // 拼接上即可 comps: comps.concat(quillEditor) }; } }; </script> 新增自定义组件创建组件并全局注册

需要根据 vue-ele-form 文档创建自定义组件，并注册。

书写配置

你可以参考源码中的配置，一下是范例和属性说明：

// custom-url.js export default { // 假如这个组件叫 url（必填） type: "custom-url", // 默认标签名（必填） label: "URL", // 用于排序，值越小，越靠前 sort: 1, // 属性配置 config: { // 属性配置说明地址（可省略） url: "https://www.xxx.com", // 组件属性配置（不知道啥是组件属性，可以看一下界面右侧） attrs: { // config 配置参考 FormDesc: // https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD config: { // max 为属性名 max: { type: "number", label: "最大输入长度" }, name: { type: "input", label: "原生 name", // 必填 required: true } // .... }, // 默认值，如果在配置文件里设置了，则每个组件都会携带 data: { name: "url" } }, // 表单项配置，是 FormDesc 中非 attrs 的其它配置， // 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm common: { config: { // 默认值 default: { type: "input", label: "默认值" } }, data: {} } } }; 合并配置并传入

<template>  <f-render :comps="comps" /> </template> <script> import comps from "f-render/src/fixtures/comps"; import customUrl from "some/path/custom-url"; export default { data() { return { comps: comps.concat(customUrl) }; } }; </script> 定制化原组件配置 & 表单配置组件配置目录：f-render/src/fixtures/comps.js 表单配置目录：f-render/src/fixtures/form-props.js 表单项通用属性配置：f-render/src/fixtures/form-item-common.js 扩展组件目录：f-render/src/fixtures/extends/[扩展组件名].js

如果你想修改组件属性或者表单的属性，减少或者增加组件，可以将上述文件拷贝到自己的项目目录，参考上述配置说明，进行更改，并传入即可：

<f-render :form-props="formProps" :comps="comps" :form-item-common="formItemCommon" />

具体而言，如果想让每个 input 组件都携带 clearable: true 的属性，我们可以这样操作：

<template>   <f-render :comps="comps" /> </template> <script> import comps from "f-render/src/fixtures/comps"; // 查找 input 组件，当然你也可以看源码，直接查看索引 const inputIndex = comps.findIndex(item => item.type === "input"); // 更改 config.attrs.data 值即可 comps[inputIndex].config.attrs.data = { clearable: true }; export default { data() { return { comps }; } }; </script> 定制化右侧 Tabs

我们可以通过 isShowRight 属性来控制右侧面板是否显示，通过 rightTabs 来定制具体显示的面板名称，具体如下：

<template>  <f-render :right-tabs="tabs" /> </template> <script> export default { data() { return { tabs: [ { label: "表单项属性配置", name: "form-item-common" }, { label: "组件属性配置", name: "form-item-attrs" } // 注释下面的内容，就可以不显示 // { label: "表单配置", name: "form-props" } ] }; } }; </script> 样式定制化

直接进行样式覆盖即可，注意不要加 scoped，否则覆盖不成功

二次开发

如果仅通过属性和样式定制化已无法满足的你和你产品经理的要求，那就需要进行定制化开发，我个人觉得代码整体还是非常简单的，你可以 clone 代码或者下载后（建议用gitee），进行相应的更改，更改后有两种处理方式:

直接放到项目目录里，并将安装 dependencies 的依赖复制到项目，进行开发即可；直接开发，然后发布到公司私服，如果是开源，则可以发到 GitHub 或者 gitee，然后安装自己的即可

具体的细节，开头提的教程里会有详细的过程，希望大家可以支持一下。

f-render 问答集锦 1、f-render 不能做什么？ 2、怎么实现 options URL 配置？ Props 说明

props: { // 表单内容 config: { type: [Object, String], required: true }, // 设计器整体高度 height: { type: [String, Number], default: "400px" }, // 保存格式 saveFormat: { type: String, default: "string", validator(val) { return ["object", "string"].includes(val); } }, // 是否纯净（用于显示表单） pure: Boolean, // 表单配置 formProps: { type: Object, default: () => formProps }, // 表单项配置 formItemCommon: { type: Object, default: () => formItemCommonDefault }, // 组件列表 comps: { type: Array, default: () => comps }, // 操作配置 operations: { type: Array, default: () => ["preview", "data", "code", "batch", "clear", "save"] }, // 是否显示右侧 isShowRight: { type: Boolean, default: true }, // 右侧属性面板 Tabs rightTabs: { type: Array, default: () => [ { label: "表单项属性配置", name: "form-item-common" }, { label: "组件属性配置", name: "form-item-attrs" }, { label: "表单配置", name: "form-props" } ] }, // 是否在加载 loading: Boolean, // 表单相关（pure 为 true 时）, 同 vue-ele-form // https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7 requestFn: Function, isLoading: Boolean, formError: Object, // .... }, 插槽 left：左侧组件列表 main: 中间区域 main-header: 头部操作区 main-content: 表单设计区 right: 右侧属性配置区

举例：

<template> <f-render>  <template v-slot:left="{frender}"> <div> <div>left</div> <div>{{frender.comps}}</div> </div> </template> </f-render> <template></template ></template>

其中 frender 数据是 f-render 组件数据的集合，具体都有哪些数据，可以参考源码，其它插槽均有此参数。

生态

Project	Status	Description
vue-ele-form		接基于 ElementUI 的数据驱动表单
f-render		专为 vue-ele-form 开发的可视化表单设计工具
vue-ele-form-json-editor		JSON 编辑器(vue-ele-form 扩展)
vue-ele-form-upload-file		upload 文件上传组件(vue-ele-form 扩展)
vue-ele-form-image-uploader		上传图片增强组件(vue-ele-form 扩展)
vue-ele-form-tree-select		树形选择框组件(vue-ele-form 扩展)
vue-ele-form-table-editor		表格编辑器(vue-ele-form 扩展)
vue-ele-form-dynamic		动态表单(vue-ele-form 扩展)
vue-ele-form-video-uploader		上传视频增强组件(vue-ele-form 扩展)
vue-ele-form-quill-editor		富文本编辑器(vue-ele-form 扩展)
vue-ele-form-markdown-editor		markdown 编辑器(vue-ele-form 扩展)
vue-ele-form-bmap		百度地图组件(vue-ele-form 扩展)
vue-ele-form-codemirror		代码编辑器(vue-ele-form-gallery 扩展)
vue-ele-form-gallery		图片/视频展示组件(vue-ele-form 扩展)
vue-ele-form-data-editor		轻量级数据编辑器(vue-ele-form 扩展)