Vue3.0 — element-plus 表单嵌套表格实现动态表单验证【实战】

我想有不少小伙伴都有遇到过表单嵌套表格，那么在这种情况下怎么实现动态验证呢？（即表单项可以动态添加/删除）
效果图如下

表格有添加和删除按钮，点击提交进行表单验证
element官方有给出表单动态验证的方法，但是实际上大多数项目的需求无法满足，所以需要在其基础上进行修改
首先data格式必须是对象包裹数组

forms: {
	tableData: []
}

然后表单绑定form数据

<el-form ref="forms" :model="forms">

表格绑定tableData数据

<el-table ref="multipleTable" :data="forms.tableData" border style="width: 100%">

接下来给表单项增加验证规则

<el-table-column label="姓名" width="80">
    <template #default="{ row, $index }">
        <el-form-item :prop="`tableData.${$index}.realname`" :rules="rules.realname">
            <el-input type="text" placeholder="输入姓名" v-model="row.realname"></el-input>
        </el-form-item>
    </template>
</el-table-column>

rules对应data rules对象，prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）
prop的关键就在于下标 $index
完整的html结构

<el-form ref="forms" :model="forms">
  <el-table ref="multipleTable" :data="forms.tableData" tooltip-effect="dark" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="姓名" width="80">
          <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.realname`" :rules="rules.realname">
                  <el-input type="text" placeholder="输入姓名" v-model="row.realname"></el-input>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column label="身份证号" show-overflow-tooltip>
          <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.idcard`" :rules="rules.idcard">
                  <el-input type="text" placeholder="输入身份证号" v-model="row.idcard"></el-input>
              </el-form-item>
          </template>
      </el-table-column>
      <el-table-column label="手机号码" show-overflow-tooltip>
          <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.mobile`" :rules="rules.mobile">
                  <el-input type="number" placeholder="输入手机号码" v-model="row.mobile"></el-input>
              </el-form-item>
          </template>
      </el-table-column>
  </el-table>
  <div class="flex_cen mt_15">
      <el-button type="primary" :disabled="forms.tableData.length==0" class="submit mr_20 fs_16" @click="ruleForms">确认提交</el-button>
  </div>
</el-form>

到这里基本上了，编译出来看看效果…
发现控制台冒红？？mmp

细心的同学应该发现了 -1 这个莫名其妙的东西，为什么下标会出现 -1 呢？怎么去解决它？！表慌～
既然下标会出现-1，那我可不可以排除这个-1的下标呢？
下面我们加个条件判断试试👇
v-if=“$index>=0”

<el-form-item v-if="$index>=0" :prop="`tableData.${$index}.realname`" :rules="rules.realname">
    <el-input type="text" placeholder="输入姓名" v-model="row.realname"></el-input>
</el-form-item>

果然，控制台干净了！
试一下效果，数据绑定正常！表单验证正常！
nice~~~~~~

传送门——> 动态表单验证完整demo

如果对你有帮助，点个赞再走吧~谢谢
关注我，不定时分享技术干货~