使用 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 方法触发整体表单校验。

四、功能亮点

五、常见问题与解决方案

六、后续优化方向

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

七、总结

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

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