vue 实现动态表单点击新增增加一行输入框

最新推荐文章于 2025-05-06 21:45:00 发布

A-炜晨科技

最新推荐文章于 2025-05-06 21:45:00 发布

阅读量5.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue2后台管理系统(刚入职的前端小白) element-ui使用及修改文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64630810/article/details/126406747

存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行

在这里插入图片描述

 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
        <div v-for="(item, index) in form.dynamicItem" :key="index">
          <el-form-item
            label="姓名"
            :prop="'dynamicItem.' + index + '.name'"
            :rules="{
            required: true, message: '姓名不能为空', trigger: 'blur'
        }"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            :prop="'dynamicItem.' + index + '.phone'"
            :rules="[
             {required: true, message: '手机号不能为空', trigger: 'blur'},
              { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }