Vue 3 中动态表单怎么实现表单设计的可视化拖拽-Vue.js-PHP中文网

vue 3 动态表单拖拽的核心是配置驱动渲染：拖拽用 vuedraggable 管理组件库与画布，生成结构化 json 配置；实时渲染通过和 v-model 绑定 reactive 数据；配置复用于保存、提交、列表生成及代码导出。

vue 3 中动态表单怎么实现表单设计的可视化拖拽

Vue 3 中实现动态表单的可视化拖拽，核心在于把“设计行为”转为可维护的数据结构，再用响应式能力驱动视图更新。不是靠手动拼 DOM，而是靠配置驱动渲染 —— 拖一次，改的是 JSON；预览一次，渲染的是真实组件。

拖拽交互：用原生 API 或 vuedraggable 统一接管

推荐优先使用 vuedraggable（基于 SortableJS），它对 Vue 3 支持完善、跨浏览器稳定、支持嵌套和动画。左侧组件库中的每个字段项（如“输入框”“下拉框”）设为 draggable，中间画布容器设为 group 匹配的 list：

拖入时触发 @end 事件，将组件类型 + 默认属性（如 { type: 'input', label: '姓名', prop: 'name', required: false }）推入表单配置数组
支持在画布内拖动排序，vuedraggable 自动同步数组顺序，无需手动 splice
避免用原生 drag API 手写坐标计算和事件委托，除非有特殊吸附/边界限制需求

表单配置：用 JSON Schema 或自定义结构描述字段

每拖一个组件，就生成一条结构化配置。不推荐直接存 HTML 字符串，而应统一字段模型，例如：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

{
  "type": "select",
  "label": "部门",
  "prop": "deptId",
  "options": [{"value": 1, "label": "技术部"}, {"value": 2, "label": "市场部"}],
  "required": true,
  "width": "200px"
}

这个结构既是设计器的数据源，也是后续表单渲染、校验、提交、列表生成的唯一依据。所有右侧属性面板的修改，都只是在更新这条 JSON 的某个字段。

实时渲染：用 `<component :is></component>` 动态挂载 + v-model 绑定

中间画布不是静态预览图，而是真实可交互的表单：

遍历配置数组，用 <component :is="getComponent(conf.type)" v-model="formData[conf.prop]" v-bind="conf.props"></component> 渲染
getComponent 是个映射函数，返回对应组件（如 ElInput、ElDatePicker），配合 Element Plus 可开箱即用
表单数据 formData 用 reactive({}) 声明，字段增删自动响应，校验规则也能按需注入