【无标题】el-input框点击新增一行和删除一行

最新推荐文章于 2024-08-01 17:45:28 发布

开发那点事儿~

最新推荐文章于 2024-08-01 17:45:28 发布

阅读量858

点赞数

分类专栏：前端开发框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58293192/article/details/125225858

版权

前端开发同时被 2 个专栏收录

91 篇文章 7 订阅

订阅专栏

框架

54 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue.js应用中实现动态增删输入框的功能。通过定义一个数组并使用v-for指令，结合新增和删除按钮，可以灵活地管理表单元素。示例代码展示了如何在input框外层创建一个div容器，并动态添加和移除数据项，为前端开发提供了实用的参考。

摘要由CSDN通过智能技术生成

文章目录

效果图

在data里面定义一个数组
arrayDat1: [{value:‘’}]

在input框的外层加一个div盒子,并且for循环定义的数组

整体代码如下

代码如下（示例）：

data() {
    return {
      ruleForm: {
        // 新增行
        arrayDat1: [{value:''}]
      },
    }
  },

<el-form-item label="关联考核样本编号" required>
    <div class="btn-div" v-for="(item,index) in ruleForm.arrayDat1" :key="index">
        <el-input v-model="item.value" placeholder="请输入考核样本编号" style="width: 400px;"></el-input>
        <el-button @click="add">新增</el-button>
        <el-button @click="del(index)">删除</el-button>
    </div>
</el-form-item>

// 点击新增按钮添加一行
    add () {
      this.ruleForm.arrayDat1.push({
        value:''
      })
    },

// 点击删除按钮去去掉一行
    del (index) {
      if (this.ruleForm.arrayDat1.length <= 1) { //如果只有一个框则不可以删除
        return false
      }
      this.ruleForm.arrayDat1.splice(index, 1) //删除数组中对应的数据也就是将这个位置的框删除
    }