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

 更新时间:2017年11月27日 09:42:45   作者:louie孙  
这篇文章主要介绍了使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能,需要的朋友可以参考下

一、写在前面

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

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

二、实现效果:

三、页面引入bootstrap、vue资源

<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="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>

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

四、绘制表格

1.工具栏区

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

2.表格区

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

这里需要说明的是:

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

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

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

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

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

1.初始化数据

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"
 }];

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

2.创建vue对象

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

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

六、删除行

删除按钮:

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

实现删除功能:

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 = [];//清空选中行数据
  }

实现效果:

七、新增行

1.新增按钮

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

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

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

3.实现新增逻辑

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

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

附1:完整js

<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中keep-alive内置组件缓存的实例代码

    vue中keep-alive内置组件缓存的实例代码

    这篇文章主要介绍了vue中的keep-alive内置组件缓存,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • electron dialog.showMessageBox的使用案例

    electron dialog.showMessageBox的使用案例

    Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • vue-cli3+typescript初体验小结

    vue-cli3+typescript初体验小结

    这篇文章主要介绍了vue-cli3+typescript初体验小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题

    vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题

    这篇文章主要介绍了vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3如何使用Vue-Router进行路由控制

    Vue3如何使用Vue-Router进行路由控制

    无论是小型项目还是中大型项目,Vue-Router都是必选的一个组件,Vue-Router提供了便捷的方式进行路由跳转,在使用过程中有一些坑,希望能给在编码找不到问题时的码农提供一点灵感
    2022-06-06
  • Vue实现天气预报功能

    Vue实现天气预报功能

    这篇文章主要为大家详细介绍了Vue实现天气预报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解Vue、element-ui、axios实现省市区三级联动

    详解Vue、element-ui、axios实现省市区三级联动

    这篇文章主要介绍了Vue、element-ui、axios实现省市区三级联动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 利用Vue实现卡牌翻转的特效

    利用Vue实现卡牌翻转的特效

    这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面,采用了卡牌翻转的形式。文中的实现方法讲解详细,快跟随小编一起学习一下吧
    2022-02-02
  • vue项目配置element-ui容易遇到的坑及解决

    vue项目配置element-ui容易遇到的坑及解决

    这篇文章主要介绍了vue项目配置element-ui容易遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中fragment.js使用方法小结

    Vue中fragment.js使用方法小结

    这篇文章主要给大家汇总介绍了Vue中fragment.js使用方法的相关资料,需要的朋友可以参考下
    2020-02-02

最新评论