使用 Vue 3 + Tiny UI 实现动态表单项及自动校验功能

一、前言

最近在开发一个质量管理模块时，遇到了一个需求：需要实现一个可以动态添加多个问题条目的表单，并对每一项进行必填校验。最终我选择使用 Vue 3 和 @opentiny/vue 组件库来实现该功能，本文将详细分享我的实现过程。

二、技术选型

• Vue 3：基于 Composition API 的响应式系统，使代码更简洁易维护。
• Tiny UI（@opentiny/vue）：阿里开源的组件库，提供了丰富的 UI 组件，如 Form, Input, Numeric, Button 等。
• 动态校验机制：通过 watchEffect 监听数据变化，自动生成对应的校验规则。

三、页面结构与核心代码解析

1. 模板部分 (template)

说明：

• 使用 v-for 遍历 checkItems 动态生成表单项；
• :prop 设置为 ${index}.字段名，支持嵌套对象路径校验；
• 使用 tiny-form 提供的 validate 方法进行整体校验。

---

2. 脚本部分 (script setup)

说明：

• 使用 ref 创建响应式数据；
• 使用 watchEffect 自动监听 checkItems 变化，动态生成校验规则；
• 使用 validate 方法触发整体表单校验。

---

四、功能亮点

特性	描述
动态表单项	支持任意数量的问题条目，便于扩展
动态校验规则	使用 watchEffect 实现规则自动更新，无需手动维护
嵌套对象路径校验	使用 ${index}.字段名 格式绑定 prop，支持嵌套对象验证
良好的可读性和维护性	基于 Vue 3 Composition API，逻辑清晰、易于维护

---

五、常见问题与解决方案

问题	解决方案
表单项未触发校验	确保 prop 正确绑定到嵌套字段路径，如 ${index}.problemDes
表单提交时未触发回调	使用 validate 方法传入回调函数，并注意上下文绑定
表单项过多导致性能下降	可考虑分页或虚拟滚动优化

---

六、后续优化方向

• ✅ 支持动态增删表单项
• ✅ 异步校验（如调用接口检查数值是否合法）
• ✅ 多语言支持
• ✅ 表单数据持久化（localStorage 或后端保存）

---

七、总结

通过本次实践，我深刻体会到 Vue 3 Composition API 在构建复杂交互场景下的优势，同时也验证了 Tiny UI 组件库在企业级项目中的实用性。希望这篇博客能帮助你在开发类似功能时少走弯路。

如果你也在使用 Vue 3 和 Tiny UI 开发表单功能，欢迎留言交流！