## 效果图 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e6d5c2e39b04d29b763715ce918890f~tplv-k3u1fbpfcp-zoom-1.image) ## 一、第一个文件index.vue，也就是表单生成器的根页面 ``` ``` - 此页面放置了两个组件，一个生成器，一个渲染器，主要功能就是生成器会制造出提供表单渲染的数据结构，再传递给渲染器去渲染使用。 - 第12行，，这个是使用json-server生成的接口，数据存在目录下的一个json文件中，如果不了解的小伙伴儿可以看一下这篇文章 ## 二、json-server存放的页面渲染的数据结构 > 文件位置，JSONData下的db.json ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c3d911679a9422ebe30ee9925484c61~tplv-k3u1fbpfcp-zoom-1.image) > 重点看一下下面的数据结构 ``` { "formConfig": { "title": "表单标题", "formItems": [ [ { "colspan": 12, "options": [], "label": "姓名", "type": "input", "key": "username", "placeholder": "请输入姓名", "inputType": "text" }, { "colspan": 12, "options": [], "label": "账号", "type": "number", "key": "account", "placeholder": "请输入年龄", "inputType": "number" } ], [ { "colspan": 12, "options": [ { "label": "男", "value": "1" }, { "label": "女", "value": "2" } ], "label": "性别", "type": "select", "key": "sadf" }, { "colspan": 12, "options": [ { "label": "西瓜", "value": "1" }, { "label": "橡胶", "value": "2" }, { "label": "巴啦啦", "value": "3" } ], "label": "喜欢的", "type": "radio", "key": "ddd" } ] ] } } ``` - 数据结构总对象formConfig，也是我的json-server接口名字。 - formItems，二维数组，功能是渲染页面，第一层数组代表整个表单是个数组构成；第二层数组代表每一行都是一个数组构成；二层数组中有多个对象组成，代表每一列是一个对象，来存放每一项表单的各个属性。 - colspan: 使用element的栅格系统, 分为24格 - options：选项式表单需要的配置项 - label：表单标题 - type：表单类型 - key：表单绑定的字段 - placeholder：提示语 - inputType：表单为文本输入框时的类型 ## 三、formCreator.vue，表单生成器组件 ``` ``` - 改文件中包含了两个组件，操作菜单组件和表单配置组件； - 操作菜单组件，负责操作整个表单的结构，添加行或者列，提供操作选项； - 表单配置组件，负责配置该列中存放的表单具体信息，什么类型，什么标题等 ## 四、menu.vue，操作菜组件 ``` ``` ## 五、formOption.vue，表单配置组件 ``` ``` ## 六、formRender.jsx，渲染器组件, 该组件是jsx文件，vue3是完全支持jsx的，非常的友好，如果不了解的小伙伴可以看一下这篇文章 ``` import { reactive } from 'vue' export default { props: { config: { type: Object }, init: { type: Object } }, emits: ['submitForm'], setup(props, context) { // 表单配置 const { title, formItems } = props.config // 表单回显 let formData = reactive(props.init) // 渲染表单元素 const renderEle = (item) => { switch (item.type) { case 'input': return case 'select': return {item.options.map(opt => ( ))} case 'number': return case 'radio': return {item.options.map(opt => ( {opt.label} ))} case 'checkbox': return {item.options.map(opt => ( {opt.label} ))} case 'date': return } } // 渲染列 const renderColumn = (cols) => { return cols.map(col => (

{renderEle(col)}

)) } // 渲染行 const renderRows = (rows) => { return rows.map(row => ( {renderColumn(row)} )) } // 提交 const submit = () => { context.emit('submitForm', formData) } return () => (<> 提交 {formItems && renderRows(formItems)} ) } } ``` 该文件负责了整个表单的渲染，如果我使用vue文件来做渲染，那整体页面结构会非常混乱，映入眼帘的是数不清的v-for，难以维护，使用jsx就完美的解决了这个问题 * * * ### 以上就是全部的内容了，该组件只是初步实现了动态表单的功能，后续的功能完善交给你们啦，不明白可以随时私信我哈，谢谢大家~