一、写在前面
1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，。
2. Vue.js 是一套构建用户界面的渐进式框架，。
二、实现效果：
三、页面引入bootstrap、vue资源
rush:js;">
这里需要注意的是，Boostrap依赖于JQuery，必须在引入Boostrap之前引入JQuery。
四、绘制表格
1.工具栏区
rush:js;">
搜索">
这里需要说明的是：
1.表格table的class Bootstrap3和Boostrap4有所不同；
2. vue.js for循环，vue1与vue2有所出入，尤其是下标index的使用。
以上两点我们在使用中需要根据自己的版本做相应调整了。
至此，展示表格数据的静态页面已经完成，接下来我们使用Vue.js使表格数据成为动态的。
Tips: datas在实际的场景中应当是通过ajax的方式访问后台获取的业务数据。
ok，我们已经完成了表格数据的动态展示，下面我们来实现删除行数据功能。
删除按钮：
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.新增按钮
2.添加模态框用于录入新增数据
3.实现新增逻辑
好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。
以上所述是小编给大家介绍的使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文地址：https://www.jb51.cc/bootstrap/35032.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
