当前位置：首页 > 全部内容 > 基于Bootstrap与Vue.js实现表格动态增删功能教程

基于Bootstrap与Vue.js实现表格动态增删功能教程

作者：山岚时间：2026-10-22 10:06:10浏览：341

本文详细介绍如何利用Bootstrap框架与Vue.js前端库，实现网页表格的动态展示、数据新增及删除功能。教程涵盖资源引入顺序、静态页面搭建、Vue对象创建、数据初始化以及通过事件绑定实现行数据的增删逻辑，并提供完整代码参考。

前言与资源引入

前言部分

Bootstrap是由Twitter开发并维护的前端框架，目前拥有广泛的用户群体，可通过Bootstrap中文网获取更多信息。

Vue.js是一套用于构建用户界面的渐进式框架，其官方网站提供了详细的使用文档和示例。

本节主要介绍实现效果及相关资源引入。

前言与资源引入

展示最终实现的界面效果。


<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>

需注意，Bootstrap依赖JQuery，因此在引入Bootstrap库之前，必须先引入JQuery库以确保功能正常。

表格静态页面绘制

接下来开始绘制表格结构。

首先处理工具栏区域的设计与实现。


<div class="row mx-auto w-75">
 <div class="col-6">
  <div class="btn-group">
  <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
  <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
  </div>
  <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
 </div>
 <div class="col-6">
  <div class="input-group">
  <input type="text" class="form-control input-group-sm" placeholder="输入设备编号进行搜索">
  <span class="input-group-btn">
   <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
   </span>
  </div>
 </div>
 </div>

接着处理表格主体区域的结构搭建。


<div class="row mx-auto w-75">
 <div class="col-12">
  <table class="table table-hover table-success">
  <thead class="thead-default">
  <tr>
   <th><input type="checkbox"></th>
   <th>序号</th>
   <th>设备编号</th>
   <th>设备名称</th>
   <th>设备状态</th>
   <th>采购日期</th>
   <th>设备管理员</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(facility,index) in facilities">
   <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
   <td>{{index+1}}</td>
   <td>{{facility.code}}</td>
   <td>{{facility.name}}</td>
   <td>{{facility.states}}</td>
   <td>{{facility.date}}</td>
   <td>{{facility.admin}}</td>
  </tr>
  </tbody>
  </table>
 </div>
 </div>

在此部分需要特别说明几点注意事项：

表格table的class属性在Bootstrap3与Bootstrap4版本中存在差异，使用时需根据具体版本进行调整。

Vue.js中的for循环语法在Vue1与Vue2版本间存在区别，特别是关于下标index的使用方式有所不同。

开发者在实际应用中，需根据所使用的具体版本对上述两点进行相应调整。

至此，展示表格数据的静态页面已构建完成，后续将使用Vue.js使表格数据具备动态交互能力。

Vue对象创建与数据初始化

第五部分涉及创建Vue对象及初始化表格数据。

第一步是初始化表格所需的基础数据。


var datas = [
 {
  code: "A2017-001",
  name: "3800充电器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c转接器",
  states: "正常",
  date: "2017-01-21",
  admin: "zero"
 }];

提示：在实际业务场景中，datas数据通常应通过ajax方式从后台接口获取，而非硬编码。

第二步是创建Vue实例对象，绑定DOM元素与数据模型。


new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,// 是否全选
  checkedRows: [],// 选中的行标，用于删除行
  facilities: datas,// 表格数据
  newRow:{}// 新增的行数据，用于新增行
 }
 })

完成上述步骤后，表格数据的动态展示功能已实现，接下来将实现删除行数据的功能。

删除行功能实现

第六部分专注于删除行功能的实现。

定义删除按钮的HTML结构及事件绑定。


<button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>

编写实现删除功能的具体JavaScript逻辑代码。


delRows:function () {
  if (this.checkedRows.length <= 0){//是否选中判断
   alert("您未选择需要删除的数据");
   return false;
  }
  if (!confirm("您确定要删除选择的数据吗？")){//删除确认
   return false;
  }

  for(var i=0;i<this.checkedRows.length;i++){//循环获取选中的行标
   var checkedRowIndex = this.checkedRows[i];
   /**根据下标移除数组元素*/
   this.facilities = $.grep(this.facilities,function (facility,j) {
   return j != checkedRowIndex;
   });
  }
  this.checkedRows = [];//清空选中行数据
  }

展示删除功能运行后的实际效果。

前言与资源引入

新增行功能实现

第七部分介绍新增行功能的实现。

首先定义新增按钮及其交互逻辑。


<button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>

添加模态框组件，用于录入新增数据的信息。


<div class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
   <h4 class="modal-title">新增设备信息</h4>
   <button type="button" class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
   <div class="row">
   <div class="col-3">设备编号：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备编号" v-model="newRow.code">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备名称：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备名称" v-model="newRow.name">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备状态：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备状态" v-model="newRow.states">
   </div>
   </div>
   <div class="row">
   <div class="col-3">采购日期：</div>
   <div class="col-9">
    <input class="form-control" placeholder="采购日期" v-model="newRow.date">
   </div>
   </div>
   <div class="row">
   <div class="col-3">管理员：</div>
   <div class="col-9">
    <input class="form-control" placeholder="管理员" v-model="newRow.admin">
   </div>
   </div>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
  </div>
  </div>
 </div>
 </div>

最后实现新增数据的业务逻辑处理。


addRow: function () {
  this.facilities.push(this.newRow);//新行数据追加至表格数据数组中
  this.newRow = {};//新行数据置空
  }

前言与资源引入

动态展示、新增和删除功能已讲解完毕，后续如有时间，将进一步探讨页面上未实现的全选、快速检索等功能。

附录1提供了完整的JavaScript代码示例。


<script>
 var datas = [
 {
  code: "A2017-001",
  name: "3800充电器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c转接器",
  states: "正常",
  date: "2017-01-21",
  admin: "zero"
 }];
 new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,
  checkedRows: [],
  facilities: datas,
  newRow:{}
 },
 methods: {
  addRow: function () {
  this.facilities.push(this.newRow);
  this.newRow = {};
  },
  saveRows:function () {//保存表格数据
  },
  delRows:function () {
  if (this.checkedRows.length <= 0){
   alert("您未选择需要删除的数据");
   return false;
  }
  if (!confirm("您确定要删除选择的数据吗？")){
   return false;
  }
  for(var i=0;i<this.checkedRows.length;i++){
   var checkedRowIndex = this.checkedRows[i];
   this.facilities = $.grep(this.facilities,function (facility,j) {
   return j != checkedRowIndex;
   });
  }
  this.checkedRows = [];
  }
 }
 });
</script>

页面源码已共享至GitHub，点击相关链接可查看并下载，欢迎交流探讨。

总结部分。

以上介绍了使用Bootstrap结合Vue.js实现表格动态展示、新增和删除功能的全过程，希望能为读者提供有益的帮助。如有任何疑问，欢迎留言，小编会及时回复。在此感谢大家的支持！

作者最新文章

Vue.js官网地址是多少？区分国际站与中文文档入口

2026-11-05 16:29:53

Vue/React 项目中怎么封装复用 flv.js 播放器组件

2026-11-03 19:42:36

Vue.js 动态路由权限控制与菜单生成实战方案

2026-11-03 13:46:47

Vue.js 企业级项目架构搭建与目录规范实战

2026-11-03 12:25:32

Vue 或 React 项目中集成 Swiper.js 的最佳实践

2026-11-02 10:29:42