Vue.js实现表格动态增加删除的方法（附源码下载）

作者：青山有信

时间：2026-10-21

本文介绍如何使用Vue.js结合Bootstrap实现表格数据的动态增加与删除功能。通过数据驱动和组件化思想，展示简洁的API应用，并提供完整的HTML与JavaScript源码示例及下载链接，帮助开发者快速上手Vue.js在表单交互中的实际应用。

文章目录

Vue.js简介

Vue.js

Vue.js是目前广泛使用的JavaScript MVVM库，其核心思想基于数据驱动与组件化。相较于Angular.js，Vue.js提供了更为简洁且易于理解的API，使开发者能够更快速地掌握并应用该技术。

首先展示实现后的效果预览：

Vue.js简介

环境依赖与效果预览

本示例代码依赖于bootstrap.min.css与vue.js文件，这些资源均可从网络获取（完整源码下载链接见文末）。

实例源码展示

Vue.js动态表格增删实现源码


<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Vue.js小demo</title> 
 <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
<!-- 这是我们的view --> 
<div class="col-md-6"> 
 <div class="panel panel-default" id="app" > 
  <div class="panel-body form-horizontal"> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Name：</label> 
    <div class="col-md-10"> 
     <input type="text" class="form-control" v-model="newPerson.name"/> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Age：</label> 
    <div class="col-md-10"> 
     <input type="text" class="form-control" v-model="newPerson.age"> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="col-md-2 control-label">Sex：</label> 
    <div class="col-md-10"> 
     <select class="form-control" v-model="newPerson.sex"> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option> 
     </select> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label for=""></label> 
    <button class="col-md-offset-2" @click="createPerson">Create</button> 
   </div> 
  </div>  
  <div class="panel-body"> 
 
   <table class="table text-center"> 
    <thead> 
     <tr > 
      <th class="text-center">Name</th> 
      <th class="text-center">Age</th> 
      <th class="text-center">Sex</th> 
      <th class="text-center">Delete</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="person in people"> 
      <td>{{ person.name }}</td> 
      <td>{{ person.age }}</td> 
      <td>{{ person.sex }}</td> 
      <td><button @click="deletePerson($index)">Delete</button></td> 
     </tr> 
    </tbody> 
   </table> 
  </div> 
 </div> 
</div> 
</body> 
<script src="js/vue.js"></script> 
<script> 
//创建一个Vue实例或"ViewModel",它连接view与model 
 var vm = new Vue({ 
   el: '#app', 
   data: { 
    newPerson: { 
     name: '', 
     age: 0, 
     sex: 'Male' 
    }, 
    people: [{ 
     name: 'Jack', 
     age: 30, 
     sex: 'Male' 
    }, { 
     name: 'Bill', 
     age: 26, 
     sex: 'Male' 
    }, { 
     name: 'Tracy', 
     age: 22, 
     sex: 'Female' 
    }, { 
     name: 'Chris', 
     age: 36, 
     sex: 'Male' 
    }] 
   }, 
   methods:{ 
    createPerson: function(){ 
     this.people.push(this.newPerson); 
     // 添加完newPerson对象后，重置newPerson对象 
     this.newPerson = {name: '', age: 0, sex: 'Male'} 
    }, 
    deletePerson: function(index){ 
     // 删一个数组元素 
     this.people.splice(index,1); 
    } 
   } 
  }) 
</script> 
</html>