当前位置：Gxlcms > JavaScript > 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

时间：2021-07-01 10:21:17 帮助过：106人阅读

一、写在前面

1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。

2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。

二、实现效果：

三、页面引入bootstrap、vue资源

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

这里需要注意的是，Boostrap依赖于JQuery，必须在引入Boostrap之前引入JQuery。

四、绘制表格

1.工具栏区

  1. <div class="row mx-auto w-75">
  2.  <div class="col-6">
  3.   <div class="btn-group">
  4.   <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
  5.   <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
  6.   </div>
  7.   <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
  8.  </div>
  9.  <div class="col-6">
  10.   <div class="input-group">
  11.   <input type="text" class="form-control input-group-sm" placeholder="输入设备编号进行搜索">
  12.   <span class="input-group-btn">
  13.    <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
  14.    </span>
  15.   </div>
  16.  </div>
  17.  </div>

2.表格区

  1. <div class="row mx-auto w-75">
  2.  <div class="col-12">
  3.   <table class="table table-hover table-success">
  4.   <thead class="thead-default">
  5.   <tr>
  6.    <th><input type="checkbox"></th>
  7.    <th>序号</th>
  8.    <th>设备编号</th>
  9.    <th>设备名称</th>
  10.    <th>设备状态</th>
  11.    <th>采购日期</th>
  12.    <th>设备管理员</th>
  13.   </tr>
  14.   </thead>
  15.   <tbody>
  16.   <tr v-for="(facility,index) in facilities">
  17.    <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
  18.    <td>{{index+1}}</td>
  19.    <td>{{facility.code}}</td>
  20.    <td>{{facility.name}}</td>
  21.    <td>{{facility.states}}</td>
  22.    <td>{{facility.date}}</td>
  23.    <td>{{facility.admin}}</td>
  24.   </tr>
  25.   </tbody>
  26.   </table>
  27.  </div>
  28.  </div>

这里需要说明的是：

1.表格table的class Bootstrap3和Boostrap4有所不同；

2. vue.js for循环，vue1与vue2有所出入，尤其是下标index的使用。

以上两点我们在使用中需要根据自己的版本做相应调整了。

至此，展示表格数据的静态页面已经完成，接下来我们使用Vue.js使表格数据成为动态的。

五、 创建VUE对象、初始化表格数据

1.初始化数据

  1. var datas = [
  2.  {
  3.   code: "A2017-001",
  4.   name: "3800充电器",
  5.   states: "正常",
  6.   date: "2017-01-21",
  7.   admin: "andy"
  8.  },
  9.  {
  10.   code: "A2017-002",
  11.   name: "Lenovo Type-c转接器",
  12.   states: "正常",
  13.   date: "2017-01-21",
  14.   admin: "zero"
  15.  }];

Tips: datas在实际的场景中应当是通过ajax的方式访问后台获取的业务数据。

2.创建vue对象

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

ok，我们已经完成了表格数据的动态展示，下面我们来实现删除行数据功能。

六、删除行

删除按钮：

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

实现删除功能：

  1. delRows:function () {
  2.   if (this.checkedRows.length <= 0){//是否选中判断
  3.    alert("您未选择需要删除的数据");
  4.    return false;
  5.   }
  6.   if (!confirm("您确定要删除选择的数据吗？")){//删除确认
  7.    return false;
  8.   }
  9.   for(var i=0;i<this.checkedRows.length;i++){//循环获取选中的行标
  10.    var checkedRowIndex = this.checkedRows[i];
  11.    /**根据下标移除数组元素*/
  12.    this.facilities = $.grep(this.facilities,function (facility,j) {
  13.    return j != checkedRowIndex;
  14.    });
  15.   }
  16.   this.checkedRows = [];//清空选中行数据
  17.   }

实现效果：

七、新增行

1.新增按钮

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

2.添加模态框用于录入新增数据

  1. <div class="modal fade" id="myModal">
  2.  <div class="modal-dialog">
  3.   <div class="modal-content">
  4.   <div class="modal-header">
  5.    <h4 class="modal-title">新增设备信息</h4>
  6.    <button type="button" class="close" data-dismiss="modal">×</button>
  7.   </div>
  8.   <div class="modal-body">
  9.    <div class="row">
  10.    <div class="col-3">设备编号：</div>
  11.    <div class="col-9">
  12.     <input class="form-control" placeholder="设备编号" v-model="newRow.code">
  13.    </div>
  14.    </div>
  15.    <div class="row">
  16.    <div class="col-3">设备名称：</div>
  17.    <div class="col-9">
  18.     <input class="form-control" placeholder="设备名称" v-model="newRow.name">
  19.    </div>
  20.    </div>
  21.    <div class="row">
  22.    <div class="col-3">设备状态：</div>
  23.    <div class="col-9">
  24.     <input class="form-control" placeholder="设备状态" v-model="newRow.states">
  25.    </div>
  26.    </div>
  27.    <div class="row">
  28.    <div class="col-3">采购日期：</div>
  29.    <div class="col-9">
  30.     <input class="form-control" placeholder="采购日期" v-model="newRow.date">
  31.    </div>
  32.    </div>
  33.    <div class="row">
  34.    <div class="col-3">管理员：</div>
  35.    <div class="col-9">
  36.     <input class="form-control" placeholder="管理员" v-model="newRow.admin">
  37.    </div>
  38.    </div>
  39.   </div>
  40.   <div class="modal-footer">
  41.    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
  42.   </div>
  43.   </div>
  44.  </div>
  45.  </div>

3.实现新增逻辑

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

好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。

附1：完整js

  1. <script>
  2.  var datas = [
  3.  {
  4.   code: "A2017-001",
  5.   name: "3800充电器",
  6.   states: "正常",
  7.   date: "2017-01-21",
  8.   admin: "andy"
  9.  },
  10.  {
  11.   code: "A2017-002",
  12.   name: "Lenovo Type-c转接器",
  13.   states: "正常",
  14.   date: "2017-01-21",
  15.   admin: "zero"
  16.  }];
  17.  new Vue({
  18.  el: "#vueApp",
  19.  data: {
  20.   checkAll: false,
  21.   checkedRows: [],
  22.   facilities: datas,
  23.   newRow:{}
  24.  },
  25.  methods: {
  26.   addRow: function () {
  27.   this.facilities.push(this.newRow);
  28.   this.newRow = {};
  29.   },
  30.   saveRows:function () {//保存表格数据
  31.   },
  32.   delRows:function () {
  33.   if (this.checkedRows.length <= 0){
  34.    alert("您未选择需要删除的数据");
  35.    return false;
  36.   }
  37.   if (!confirm("您确定要删除选择的数据吗？")){
  38.    return false;
  39.   }
  40.   for(var i=0;i<this.checkedRows.length;i++){
  41.    var checkedRowIndex = this.checkedRows[i];
  42.    this.facilities = $.grep(this.facilities,function (facility,j) {
  43.    return j != checkedRowIndex;
  44.    });
  45.   }
  46.   this.checkedRows = [];
  47.   }
  48.  }
  49.  });
  50. </script>

页面源码已共享至GitHub， 点击这里 可查看下载，欢迎探讨。

总结

以上所述是小编给大家介绍的使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！