使用Bootstrap+Vue.js实现表格的动态展示、新增和删除功能
小编给大家分享一下使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南漳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
一、写在前面
1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。
2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。
二、实现效果：
三、页面引入bootstrap、vue资源
这里需要注意的是，Boostrap依赖于JQuery，必须在引入Boostrap之前引入JQuery。
四、绘制表格
1.工具栏区
新增
保存
删除
2.表格区
|
序号 |
设备编号 |
设备名称 |
设备状态 |
采购日期 |
设备管理员 |
|
{{index+1}} |
{{facility.code}} |
{{facility.name}} |
{{facility.states}} |
{{facility.date}} |
{{facility.admin}} |
这里需要说明的是：
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，我们已经完成了表格数据的动态展示，下面我们来实现删除行数据功能。
六、删除行
删除按钮：
删除
实现删除功能：
delRows:function () {
if (this.checkedRows.length <= 0){//是否选中判断
alert("您未选择需要删除的数据");
return false;
}
if (!confirm("您确定要删除选择的数据吗？")){//删除确认
return false;
}
for(var i=0;i实现效果：
七、新增行
1.新增按钮
新增
2.添加模态框用于录入新增数据
新增设备信息
×
设备编号：
设备名称：
设备状态：
采购日期：
管理员：
确认
3.实现新增逻辑
addRow: function () {
this.facilities.push(this.newRow);//新行数据追加至表格数据数组中
this.newRow = {};//新行数据置空
}
好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。
附1：完整js
页面源码已共享至GitHub， 点击这里 可查看下载，欢迎探讨。
以上是“使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
文章标题：使用Bootstrap+Vue.js实现表格的动态展示、新增和删除功能
文章位置：http://chengdu.cdxwcx.cn/article/jpccss.html
