动态新增input输入框

实现原理,修改绑定数组的长度。

需要绑定的数组

javascript 复制代码
 memberList: [
                        {
                            userName: '',
                            phone: '',
                            position: ''
                        }
                    ],

点击时触发修改绑定数组长度的方法

javascript 复制代码
            addItem() {
                    this.memberList.push({name: '', phone: '', post: ''})
            },
javascript 复制代码
            deleteItem(item, index) {
                this.inputForm.memberList.splice(index, 1)
            },

页面上绑定点击事件的组件,和动态绑定数组的组件

html 复制代码
<el-card>
            <spean>添加成员</spean>
            <div v-for="(input, index) in memberList" :key="index" style="margin-left: 15vh">
                <el-row :gutter="1">
                    <el-col :span="7">
                        <el-form-item label="名字" prop="userName" class="foritem" label-width="45px">
                            <el-input v-model="input.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="职务" prop="position" class="foritem" label-width="45px">
                            <el-input v-model="input.position"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="电话" prop="phone" class="foritem" label-width="45px">
                            <el-input v-model="input.phone"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <el-form-item class="foritem" label-width="20px">
                            <el-tag type="primary"
                                    size="mini"
                                    @click="addItem()">+
                            </el-tag>
                            <el-tag v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-
                            </el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-card>
相关推荐
DDDDDDDRDDR2 分钟前
C++容器:list
开发语言·c++·stl
Elnaij7 分钟前
从C++开始的编程生活(7)——取地址运算符重载、类型转换、static成员和友元
开发语言·c++
IT_陈寒7 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用9 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
chen_ever18 分钟前
golang之go modules
开发语言·后端·golang
摸鱼的春哥25 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
郝学胜-神的一滴26 分钟前
Effective Modern C++ 条款26:避免在通用引用上重载
开发语言·c++·程序人生
草莓熊Lotso28 分钟前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
Aczone281 小时前
硬件(六)arm指令
开发语言·汇编·arm开发·嵌入式硬件·算法
YA3332 小时前
java设计模式二、工厂
java·开发语言·设计模式