动态新增input输入框

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

        需要绑定的数组

 memberList: [
                        {
                            userName: '',
                            phone: '',
                            position: ''
                        }
                    ],

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

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

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

<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. input输入设置样式

    2023-12-30 20:50:05       8 阅读
  2. input输入禁止输入小数点方法

    2023-12-30 20:50:05       8 阅读
  3. HTML中input输入(详解输入的用法)

    2023-12-30 20:50:05       8 阅读
  4. vue3 实现 input 输入聚焦

    2023-12-30 20:50:05       22 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-30 20:50:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-30 20:50:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-30 20:50:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-30 20:50:05       18 阅读

热门阅读

  1. 四、KMDF开发之traceview跟踪打印信息

    2023-12-30 20:50:05       37 阅读
  2. 【Yii2】数据库查询方法总结

    2023-12-30 20:50:05       40 阅读
  3. python统计学-单个总体样本容量的确定

    2023-12-30 20:50:05       30 阅读
  4. do while 与while

    2023-12-30 20:50:05       37 阅读
  5. k8s 对外服务之 Ingress

    2023-12-30 20:50:05       32 阅读
  6. ES高级用法:DeleteByQueryRequest

    2023-12-30 20:50:05       38 阅读
  7. 从jdbc到spring-boot-starter-jdbc

    2023-12-30 20:50:05       40 阅读
  8. C++程序设计实践报告【格式】

    2023-12-30 20:50:05       32 阅读
  9. 工具--Git详解

    2023-12-30 20:50:05       36 阅读
  10. springboot+mybatis项目

    2023-12-30 20:50:05       41 阅读
  11. MySQL函数

    2023-12-30 20:50:05       43 阅读