vue3弹窗中循环生成表单的校验和重置问题

应用场景：

1、弹框里的表单是根据后台返回的时段生成的，后台返回几个时段，就渲染几组表单。

       -1- 重置：遍历每个表单，获取当前表单的引用，在resetFields()

       -2- 校验：创建一个数组来存储每个表单的校验结果，遍历每个表单，获取当前表单的引用，校验当前表单，将校验结果存储到数组中，判断到最后一个表单的时候，检查所有的校验结果，校验通过，执行提交操作，否则，执行失败操作。

2、hour 和 hourSupHeat 不可编辑，需计算 hourSupHeat = hour * supHeat,

        这里需要监听 initFormdata的变化，再循环item，再监听每个item里的supHeat，然后计算结果，我这里需要的结果是字符串形式，所以转了String。

3、表单限制只能输入数字，限制2位或3位小数，rules规则里使用正则表达式匹配，hourSupHeat 鼠标移入有公式提示，el-tooltip,使用 label 插槽把 icon 放到文字后面。

数据结构：数组对象形式

initFormData：[
  { start: '9', end: '16', supTemp: '', supPres: '', hour: '8', supHeat: '', supFlow: '', hourSupHeat: '' },
  { start: '16', end: '9', supTemp: '', supPres: '', hour: '16', supHeat: '', supFlow: '', hourSupHeat: '' },
]

效果显示：