vue点击按钮时，新增或删除一行表单元素-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue点击按钮时，新增或删除一行表单元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

实现效果如下图所示：

vue点击添加一行表格,vue.js,vue.js,前端假新增删除一行数据,点击按钮新增一行表单元素,点击新增行,点击删除行

主要代码布局如下：

vue点击添加一行表格,vue.js,vue.js,前端假新增删除一行数据,点击按钮新增一行表单元素,点击新增行,点击删除行

主要代码如下：

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
        })
      }
    }
  })
}

以上就简单的实现了一个前端的假新增删除操作文章来源地址https://www.toymoban.com/news/detail-519983.html

到了这里，关于vue点击按钮时，新增或删除一行表单元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！