vue动态增减表单+验证

最新推荐文章于 2024-10-14 16:33:38 发布

小丁冲鸭！

最新推荐文章于 2024-10-14 16:33:38 发布

阅读量918

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/DZY_12/article/details/108872783

版权

本文介绍了在Vue和Element项目中如何处理动态增删表单的情况，并重点讲解了当表单中某一属性为数组时，如何进行每个数组元素的验证。通过示例代码展示了HTML和JS部分的实现，帮助读者理解动态表单验证的配置方法。

摘要由CSDN通过智能技术生成

前言：

vue + element 项目中遇到form表单需要动态增删的情况，做了个小demo，效果大概是这样的：

这里主要想讲的是，表单中某属性是个数组，而想要验证每个数组里的每个数据，该怎么配置呢？

html部分代码：

<template>
  <div class="hello">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-row v-for="(item, index) in form.data" :key="index">
        <el-col :span="8">
            <el-form-item label="姓名" :prop="`data[${index}].name`" :rules='rules.name'>
                <el-input v-model="item.name"  clearable></el-input>
            </el-form-item>