动态新增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>
相关推荐
再见晴天*_*1 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08273 小时前
Qt程序单独运行报错问题
开发语言·qt
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
hdsoft_huge4 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘5 小时前
39.网络流入门
开发语言·网络·c++·算法
前端君5 小时前
实现最大异步并发执行队列
javascript
未来之窗软件服务5 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟