vue点击按钮时，新增或删除一行表单元素

最新推荐文章于 2024-05-29 17:44:30 发布

笑到世界都狼狈

最新推荐文章于 2024-05-29 17:44:30 发布

阅读量5.1k

点赞数

分类专栏： vue.js 文章标签： vue.js 前端假新增删除一行数据点击按钮新增一行表单元素点击新增行点击删除行

本文链接：https://blog.youkuaiyun.com/qq_36509946/article/details/128913344

版权

vue.js 专栏收录该内容

22 篇文章

订阅专栏

文章介绍了在项目开发中如何实现点击按钮动态新增和删除input文本框的功能，主要使用Vue.js框架，通过数组操作来管理文本框列表，并提供了新增(addShareFolder)和删除(deleteRow)的事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中，有这样一个需求，点击按钮时，新增一行input文本框，且文本框后面有删除操作，点击删除还可以删除当前行。

实现效果如下图所示：

主要代码布局如下：

主要代码如下：

1.声明变量

fileNameList: [{
   fileName: ''
}]

2.页面元素标签

<el-row>
 <el-col :span="21">
    <el-form-item label="" prop="" label-width="10px">
       以下名称。。。
     </el-form-item>
  </el-col>
  <el-col :span="2">
     <el-button size="mini" title="新增" class="editBtn" @click="addShareFolder"><svg-icon icon-class="add" /></el-button>
  </el-col>
</el-row>
<div style="height: 147px;overflow-y: auto">
  <el-row v-for="(e, index) in temp.fileNameList" :key="index">
     <el-col :span="19">
        <el-form-item label="名称" prop="folder" label-width="60px">
           <el-input v-model="e.fileName" placeholder="请输入"></el-input>
        </el-form-item>
     </el-col>
     <el-col :span="3">
        <label class="exceptionHoles-delete" @click="deleteRow(index)">删除</label>
      </el-col>
   </el-row>
</div>

3.新增删除事件

/**
* 新增<前端假新增>
*/
addShareFolder() {
  this.temp.fileNameList.push({
     fileName: ''
  })
},
/**
* 删除<前端假删除>
* @param index 当前点击元素索引
*/
deleteRow(index) {
   // console.log('index', index)
   this.$confirmBox('确定删除？', '提示').then(() => {
     for (let i = 0; i < this.temp.fileNameList.length; i++) {
       if (index === i) {
         this.temp.fileNameList.splice(i, 1)
         this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
        })
      }
    }
  })
}

以上就简单的实现了一个前端的假新增删除操作