首页 > 其他分享 >vue动态添加input框

vue动态添加input框

时间:2023-03-30 18:58:32浏览次数:40  
标签:index vue 代码 counter dynamicForm 添加 input

  1. 效果

  1. 代码
点击查看代码
</details>
   <el-dialog title="添加" :visible.sync="dynamicFormVisible" width="920px">
        <el-form :model="dynamicForm">
          <div>
            <el-form-item style="text-align: center;">
              <el-input style="width:230px" placeholder="请输入学校" autocomplete="off"></el-input>
              <el-input style="width:180px" placeholder="请输入专业" autocomplete="off"></el-input>
              <el-input style="width:150px" placeholder="请输入安置人数" autocomplete="off"></el-input>
              <el-date-picker type="month" placeholder="选择安置日期" format="yyyy 年 MM 月" value-format="yyyy-MM-dd"></el-date-picker>
              <el-button type="success" @click="addInput" icon="el-icon-plus"></el-button>
            </el-form-item>
          </div>
          <div v-for="(item, index) in dynamicForm.counter">
            <el-form-item style="text-align: center;">
              <el-input style="width:230px" v-model="item.xxName" placeholder="请输入学校" autocomplete="off"></el-input>
              <el-input style="width:180px" v-model="item.zyName" placeholder="请输入专业" autocomplete="off"></el-input>
              <el-input style="width:150px" v-model="item.azCount" placeholder="请输入安置人数" autocomplete="off"></el-input>
              <el-date-picker v-model="item.azDate" type="month" placeholder="选择安置日期" format="yyyy 年 MM 月" value-format="yyyy-MM-dd"></el-date-picker>
              <el-button type="danger" @click="delInput(item, index)" icon="el-icon-minus"></el-button>
            </el-form-item>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dynamicFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="saveForm()">确 定</el-button>
        </span>
      </el-dialog>

[========]

  export default {
data() {
  return {
    dynamicFormVisible: true,
    dynamicForm: {
      counter: []
    }
  }
},
methods: {
  addInput() {
    this.dynamicForm.counter.push({'xxName': '', 'zyName': '', 'azCount': '', 'azDate': '' })
  },
  delInput(index) {
    this.dynamicForm.counter.splice(index, 1)
  },
  saveForm() {
    console.log(this.dynamicForm.counter)
  }
}

}

点击查看代码

标签:index,vue,代码,counter,dynamicForm,添加,input
From: https://www.cnblogs.com/LLW521/p/17273978.html

相关文章

  • Vue3中Mitt的使用
    Vue中使用MittMitt是一个在Vue.js应用程序中使用的小型事件总线库。该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props。Mitt的特性和功能介绍轻量级:Mit......
  • VUE3基础笔记
    date:2023-3-3010:00:00categories:-前端系列tags:-VUEtitle:VUE3基础笔记视频地址:2022最新Vue零基础小白入门教程,从入门到精通,快速上手简单易懂_哔哩哔哩_b......
  • vue是什么?vue的优点有哪些?
    https://blog.csdn.net/m0_64346035/article/details/124809501vue是指一个用于创建用户界面的渐进式框架,旨在更好地组织与简化Web开发;Vue的核心库只关注视图层,并且非常容......
  • element+vue2的查询form表单封装成组件复用
    <template><el-form:inline="true"style="display:flex;flex-direction:row;flex-wrap:wrap;flex:1;"class="formClass"label-width="90px......
  • 创建链接并添加边框
     可以在<li>or<a>上添加text-align:center 样式来让链接居中。可以在 border <ul>上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框,可以在每......
  • mybatis添加提交事务方法
    方法一利用commit();方法//提交事务sqlSession.commit();方法二在获取sqlSession对象的时候,自动提交事务 MyBatis事务:openSession():默认开......
  • Vue UI库
    UI组件库一般会问两个问题-基于哪个框架:比如Vue,React......-PC端||移动端移动端和PC端常见的UI库-移动端 -Vant:https://youzan.github.io/vant ......
  • vue中退出循环的方法
    forEachforEach不能使用break和continue。return也无法退出循环。使用break,会报错(报错信息:SyntaxError:Illegalbreakstatement)。使用continue,会报错(报错信息:SyntaxErr......
  • ant-design-vue 两个select省市联动是典型的例子(添加汉语名字)
    <template><div><a-form:label-col='{span:7}':wrapper-col='{span:15}'><a-row><a-col:span='12'><a-form-itemlabel='省'>......
  • 第十六篇 vue - 深入组件 - 注册
    组件注册一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册全局注册app.component()我们......