vue3+setup 多个表单使用同一校验规则 ，点击按钮时一起校验

vue3+setup 多个表单使用同一校验规则 ，点击按钮时一起校验

---

前言

根据接口获取到的数据，在弹出框展示，数据是数组格式，需要for循环，展示形式是表单form，需要对表单进行修改，验证。

---

一、一个表单下的for循环

因为页面展示很简单，就一个搜索下拉框，加几个选择下拉框，然后循环一下就好了；功能很简单，就是选择就行了；验证就更简单，只验证一个搜索下拉框就行。所以我直接在form下for循环，但问题很快出现：因为form的prop不支持同一个，后来又改成给每条数据添加一个新参数（就是旧的参数加了个索引。如旧参数是 value,现在是value0）但是后面发现还是不能验证。 百度了一下，说是 v-model="v[sectionSort${i}]"这里的问题，v-module的参数和prop的参数不匹配
代码如下：

     <el-form :ref="formRef" :model="workLineList">
        <div v-for="(v, i) in workLineList" :key="i" style="margin-bottom: 20px">
          <el-form-item
            label="名称："
            :prop="'sectionSort'+i"
            :rules="[{ required: true, trigger: 'blur', message: '请选择' }]"
            style="float: left; margin-left: 40px"
          >
            <el-select
               v-model="v[`sectionSort${i}`]"
              clearable
              filterable
              :loading="loading"
              placeholder="请选择"
              remote
              :remote-method="createRemoteMethod(v, i)"
              style="width: 220px"
            >
              <el-option
                v-for="item in v.opina"
                :key="item.productionLineId"
                :label="item.productionLineName"
                :value="item.productionLineName"
              />
            </el-select>
          </el-form