Vue3、Element Plus使用v-for循环el-form表单进行校验

最新推荐文章于 2025-04-27 16:14:07 发布

会编码的派大星

最新推荐文章于 2025-04-27 16:14:07 发布

阅读量3.1k

点赞数 22

分类专栏： Vue Element 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/m0_67584973/article/details/139630066

版权

在开发中遇到了这样一个需求

有一个form是通过v-for生成出来的，并且数量不确定，每个表单中的字段都需要做校验，就将自己的解决方法记录了下来。

在这里插入图片描述

完整代码如下

<template>
  <div class="for-form">
    <el-button type="primary" @click="addHandle">新 增</el-button>

    <div class="form-box">
      <div class="form-item" v-for="(item, index) in formList" :key="index">
        <el-form :model="item" :rules="rules" label-width="auto" style="max-width: 300px" label-position="top"
          :ref="($event) => handle($event, index)">
          <el-for