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

小编给大家分享一下使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南漳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

一、写在前面

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

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

二、实现效果：

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

三、页面引入bootstrap、vue资源

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

四、绘制表格

1.工具栏区


 
  
  新增
  保存

删除

序号设备编号设备名称设备状态采购日期设备管理员

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

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

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的方式访问后台获取的业务数据。

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

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

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

实现效果：

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

七、新增行

1.新增按钮

新增

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

3.实现新增逻辑

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

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

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

附1：完整js

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

以上是“使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页名称：使用Bootstrap+Vue.js实现表格的动态展示、新增和删除功能
当前地址：http://cqcxhl.cn/article/jpccss.html

其他资讯

分享至：

关于我们

公司简介发展历程

服务项目

高端网站建设小程序开发 APP开发网络营销

建站知识

网站建设网站设计网站制作小程序

联系我们

公司地址人才招聘

成都重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

重庆分公司，新征程启航

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

其他资讯