element-ui循环生成表单校验规则（附代码）

关于循环生成的表单如何实现每个表单单独校验

在公司开发时，遇到需要循环生成表单并做校验的需求，当时觉得挺难花费了很长时间才写出来，后来发现其实并不难，故整理一个所谓的“模板”供同样被这个需求困扰的同学使用。

效果图：

手动校验时选中哪个校验哪个，提交表单时全部校验

---

效果图只做展示，与后续代码并没有直接关系

代码：

  <el-form :model="form" ref="form" :rules="rules">
    <el-row v-for="(domain,index) in form.dataList.list" :key="index" type="flex">
      <!-- 这里只做参考，循环项可以根据实际需求更替 -->
      <el-form-item :prop="`dataList.list.${index}.name`" :rules="rules.name">
        <el-input
          v-model="domain.name"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item :prop="`dataList.dataList.${index}.value`" :rules="rules.value">
        <el-input
          v-model="domain.value"
          placeholder="请输入Value"
          clearable
        />
      </el-form-item>

      <!-- 增加/删除 -->
      <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="add"></el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-remove-outline"
        @click.native.prevent="remove(domain)"
      ></el-button>
    </el-row>
  </el-form>

通过:prop="dataList.list.${index}.name"，动态绑定含有索引的model字段，使传入Form的字段具有唯一性，实现单独校验。

JS部分：

  data() {
    return {
      // 表单循环数据
      form: {
        dataList: {
          list: [
            {
              name: "",
              value: ""
            }
          ]
        }
      }
    };
  }

本篇博客着重于表单校验部分，关于循环生成的表单删除或新增功能，可参考element-ui官网form表单动态增减表单项部分

---

可以根据公司需求去添加循环的内容，有更好的写法与想法欢迎私聊或留言。不足的地方希望指正。