基于 vue3 的动态表单组件设计与实现

这段代码实现了一个基于 Element Plus 的通用表单弹窗组件,主要用于创建和编辑应用授权信息。下面是对代码的详细分析:

1. 组件结构

模板部分 (<template>)

  • 使用了 el-dialog 作为弹窗容器,支持居中显示和追加到 body
  • 内部包含一个可滚动的表单区域 (el-scrollbar)
  • 表单使用 el-form 实现,支持动态生成表单项
  • 表单项通过 v-for 循环 formItems 数组动态生成
  • 支持多种表单控件类型:input、select、radio、switch、checkbox、input-number、tree-select、date-picker、text 等
  • 底部有确定和取消按钮

脚本部分 (<script setup>)

  • 使用 Vue 3 的 <script setup> 语法
  • 定义了组件 props 和 emits
  • 实现了表单数据管理、验证、提交等功能
  • 支持异步获取选项数据、表单项监听、计算属性等高级功能

2. 主要功能

动态表单生成

  • 通过 modalConfig.formItems 配置动态生成表单

  • 每个表单项可以配置:

    • 类型 (type)
    • 标签 (label)
    • 属性 (attrs)
    • 验证规则 (rules)
    • 选项 (options 或异步获取方法 fetchOptions)
    • 事件处理 (events)
    • 监听器 (watch, watchEffect, computed)

数据管理

  • formData 存储表单数据

  • formRules 存储验证规则

  • 提供方法操作表单数据:

    • getFormData() - 获取表单数据
    • setFormData() - 设置表单数据
    • setFormItemData() - 设置单个表单项数据

弹窗控制

  • setModalVisible() - 显示弹窗并可设置初始数据
  • handleClose() - 隐藏弹窗
  • handleCloseModal() - 关闭弹窗时重置表单

表单提交

  • 使用 useThrottleFn 对提交方法进行节流
  • 提交前执行验证
  • 支持 beforeSubmit 钩子处理数据格式
  • 提交成功后显示消息并触发事件

3. 具体实现分析

优点

  1. 高度可配置 :通过 modalConfig 可以灵活配置表单的各种属性
  2. 动态性强:支持动态表单项、异步选项加载、各种表单控件
  3. 功能完善:包含表单验证、数据格式化、节流提交、弹窗控制等
  4. 代码复用:通用组件可以在多个地方复用

4. 具体配置分析 (modalConfig)

配置了一个用于应用授权管理的表单,包含以下字段:

  1. 应用选择 (appId)

    • 类型:select
    • 异步获取应用列表
    • 编辑模式下禁用
  2. 经营单位选择 (ouId)

    • 类型:select
    • 异步获取经营单位列表
    • 编辑模式下禁用
  3. API调用次数限制 (apiLimits)

    • 类型:input-number
    • 最小值 0
  4. 授权日期范围 (authDateFrom, authDateTo)

    • 类型:date-picker
    • 提交前会格式化日期

5. 改进建议

  1. 移除多余的 <template> 嵌套
  2. 增加更详细的错误处理和用户反馈
  3. 考虑将 prepareFuncs 的逻辑优化,避免潜在的内存泄漏
  4. 增加表单控件的默认值处理
  5. 考虑添加表单加载状态指示

6. 使用示例

markdown 复制代码
javascript
	// 父组件中使用

	import modalConfig from './modalConfig';

	 

	const modalRef = ref();

	 

	// 显示弹窗

	function showModal() {

	  modalRef.value.setModalVisible();

	}

	 

	// 处理提交

	function handleSubmit() {

	  // 刷新列表等操作

	}

	</script>

	 

	<template>

	  <UniversalModal ref="modalRef" :modal-config="modalConfig" @submit-click="handleSubmit" />

	</template>

这个组件设计得非常灵活,可以适应多种表单场景,特别是需要动态生成表单或有多样表单控件的情况。通过合理的配置,可以快速实现各种表单功能而无需重复编写模板代码。

js(https://code.juejin.cn/pen/7532770366641405961) 复制代码
相关推荐
excel10 小时前
Vue 中 v-if 与 v-for 的优先级及最佳实践(Vue2 / Vue3 对比)
前端
吃饭最爱10 小时前
tomcat的功能和作用
前端
ObjectX前端实验室11 小时前
【图形编辑器架构】:编辑器的 Canvas 分层事件系统
前端·canvas·图形学
liaojuajun11 小时前
可视化地图
开发语言·javascript·ecmascript
真的想不出名儿12 小时前
登录前验证码校验实现
java·前端·python
小高00712 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖12 小时前
Playwright的元素定位器
前端
我是日安12 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
吹晚风吧12 小时前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
浅浅的学一下12 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端