vue + element 实现动态表单

最新推荐文章于 2024-05-29 15:05:00 发布

最陌生的程序员

最新推荐文章于 2024-05-29 15:05:00 发布

阅读量2k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_36210329/article/details/106590017

版权

本文总结了如何使用Vue和Element UI实现动态增删表单项的功能。通过在data中定义动态项dynamicItem，并在methods中编写增加和删除的方法，动态表单可以实现点击按钮时增加或删除输入框行。必填项设置为普通表单，动态表单部分则利用Vue的数据绑定和Element UI组件实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于动态增减表单项，Element UI 官方文档表单那一节已经介绍得很清楚了，我之前没有看见，绕了很多弯路，这里针对点击按钮增删一排输入框的问题做一个总结。

效果图如下

存在一排必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行

必填项很简单，就是普通表单：

<el-form
     ref="form"
    :rules="formRules"
    :inline="true"
    :model="form"
    label-width="80px"
>
    <!-- 固定项目 -->
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" palceholder="请输入姓名">
        </el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">

最低0.47元/天解锁文章