Vue动态表单创建实践-优快云博客

本文链接：https://blog.youkuaiyun.com/ldqwananxh/article/details/109515666

本文介绍了如何在Vue中实现动态表单的添加功能，通过查阅资料并实践，总结了一套可行的解决方案。以下是实现效果的截图展示。

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

说一下vue 动态表单添加，查了几篇文章，照着改了改，算是原创吧，不多说上代码。展示的图是这样的
列表点击添加评分出现表单窗口
点击添加一条，动态拓展一条

//这段代码是静态的
<!-- --<el-form-item class="rules" label="评分项:" prop="moreNotifyOjbectRules.scoreItems" :rules="moreNotifyOjbectRules.scoreItems">
                    <el-input v-model="addForm.moreNotifyObject.scoreItems" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="技术分:" prop="moreNotifyOjbectRules.technology" :rules="moreNotifyOjbectRules.technology">
                    <el-input v-model="addForm.moreNotifyObject.technology" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="经济分:" prop="moreNotifyOjbectRules.economics" :rules="moreNotifyOjbectRules.economics">
                    <el-input v-model="addForm.moreNotifyObject.economics" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>
                <el-form-item class="rules" label="共同分:" prop="moreNotifyOjbectRules.common" :rules="moreNotifyOjbectRules.common">
                    <el-input v-model="addForm.moreNotifyObject.common" placeholder="请输入"  class="el-select_box"></el-input>
                </el-form-item>-->

//上段代码是静态的是下面代码的一个注释掉的，一开始以为要写上，
//结果发现静态的表单元素一直显示，
//以至于表单初始化显示的时候就显示了两组评分项，所以才将其注释掉了
<el-dialog  :visible.sync="addFormVisible" :close-on-click-modal="false" width="90%">
            <P class="title"><span class="titleSpan">丨</span>新增</P>
            <div class=&