基于vue3+ts+vite封装的动态表单，支持手动编辑生成页面表单配置并渲染使用，所有源码都在文章中

效果图

一、第一个文件index.vue，也就是表单生成器的根页面

• 此页面放置了两个组件，一个生成器，一个渲染器，主要功能就是生成器会制造出提供表单渲染的数据结构，再传递给渲染器去渲染使用。

• 第12行，http://localhost:3000/formConfig，这个是使用json-server生成的接口，数据存在目录下的一个json文件中，如果不了解的小伙伴儿可以看一下这篇文章https://blog.csdn.net/ligonglanyuan/article/details/120665684

二、json-server存放的页面渲染的数据结构

文件位置，JSONData下的db.json

重点看一下下面的数据结构

{
  "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的，非常的友好，如果不了解的小伙伴可以看一下这篇文章https://blog.csdn.net/lwf3115841/article/details/128259536

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就完美的解决了这个问题

---

以上就是全部的内容了，该组件只是初步实现了动态表单的功能，后续的功能完善交给你们啦，不明白可以随时私信我哈，谢谢大家~