vue+element UI 实战点击按钮添加一组输入框

 点击添加实验组  ,添加一组输入框,点击减号删除一组输入框

  <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button>

 

  <div class="form"
             v-show="dialogForm"
             v-for="(item,index) in List"
             :key="index"
             style="position: relative"
        >
          <el-form :model="form"
                   class="show"
                   :label-position="labelPosition"
                   style="text-align:left"
                   prop="defaultgrup"
                   ref="form"
          >

            <el-button icon="el-icon-minus"
                       @click="deleteItem(item,index)"
                       circle
                       style="font-size:10px;   position: absolute; left:1px"/>

            <el-form-item class="el-icon-remove-outline"
                          :label="&quot;实验组&quot;+index"
                          :label-width="formWidth"
                          prop="id"
            >
              <el-input v-model="item.id"
                        style="width:430px"
                        autocomplete="off"/>
            </el-form-item>

            <el-form-item label="灰度" :label-width="formWidth" prop="date1" >
              <el-input v-model="item.date1"
                        style="width:430px"

                        autocomplete="off"/>
            </el-form-item>
          </el-form>
        </div>

 

 List: []

methods:{
addItem() {
      this.dialogForm = true

      this.List.push({
        id: '',
        date1: ''
      })
    },
    deleteItem(item, index) {
      console.log(index)
      this.List.splice(index, 1)
    }
}

效果如下: 

 


文章标签:

原文连接:https://blog.csdn.net/qq_44811609/article/details/122216994

相关推荐

【论文阅读|深读】RDAA:Role Discovery-Guided Network Embedding Based on Autoencoder and A

ivx杨帆启航React/Pixi.js/FaaS、Krpano及微服务架构

支持SwiftUI!Swift版图片&视频浏览器-JFHeroBrowser上线啦

vivo官网APP全机型UI适配方案

《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(7)-Fiddler状态面板-QuickExec命令行

SwiftUI 布局 —— 尺寸( 下 )

SpringBoot数据库管理 - 用Liquibase对数据库管理和迁移?

从SwiftUI的@State来看看Property Wrapper

七夕快到了,用SwiftUI做一个表达爱意的心形动画

RK3568开发笔记(四):在虚拟机上使用SDK编译制作uboot、kernel和buildroot镜像

【论文阅读|深读】GAS:Role-Oriented Graph Auto-encoder Guided by Structural Information

8个SwiftUI的小技巧让隔壁同事两眼放光,直呼太卷了

【摸鱼神器】UI库秒变低代码工具——表单篇(二)子控件

Phabricator Conduit API介绍

利用 UIScrollView 实现六棱柱图片浏览效果

【antd】5分钟快速完成antd样式的按需引入以及自定义主题

对话Robin Marx:HTTP\u002F3和QUIC将带来重大机遇和挑战

一种新的UI测试方法:视觉感知测试

【云原生 | 15】Docker commit与Docker build比较

VBA驱动SAP GUI完成界面元素值初始化