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

2025/6/24 9:48:45 来源：https://blog.csdn.net/qq_35946021/article/details/148849047 浏览: 次关键词：使用 Vue 3 + Tiny UI 实现动态表单项及自动校验功能

一、前言

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

二、技术选型

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

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

1. 模板部分 (`template`)

<template><div class="demo"><tiny-form ref="modalFormRef" :model="checkItems" :rules="formRules" label-width="120px" validate-type="text"><div v-for="(item, index) in checkItems" :key="item.id"><tiny-form-item :prop="`${index}.problemDes`" label="问题描述"><tiny-input v-model="item.problemDes" /></tiny-form-item><tiny-form-item :prop="`${index}.faultQty`" label="不良数"><tiny-numeric v-model="item.faultQty" :precision="0" min="1" max="9999999"></tiny-numeric></tiny-form-item></div><tiny-button type="primary" @click="submitForm">确 定</tiny-button></tiny-form></div>
</template>

说明：

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

2. 脚本部分 (`script setup`)

<script setup>
import { ref, watchEffect } from 'vue';const modalFormRef = ref();// 表格数据源
const checkItems = ref([{ id: 1, problemDes: '' },{ id: 2, problemDes: '' },{ id: 3, problemDes: '' },{ id: 4, problemDes: '' },
]);// 表单校验规则
const formRules = ref({});// 动态生成每项的校验规则
watchEffect(() => {const rules = {};checkItems.value.forEach((_, index) => {rules[`${index}.problemDes`] = [{ required: true, message: '问题描述不能为空', trigger: 'blur' },];rules[`${index}.faultQty`] = [{ required: true, message: '不良数不能为空', trigger: 'blur' },];});formRules.value = rules;
});// 提交表单
const submitForm = () => {modalFormRef.value.validate(valid => {if (valid) {console.log('校验通过，提交数据:', checkItems.value);} else {console.log('校验失败');return false;}});
};
</script>

说明：

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

四、功能亮点

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

五、常见问题与解决方案

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