这里需要说明的是：
1.表格table的class Bootstrap3和Boostrap4有所不同；
2. vue.js for循环，vue1与vue2有所出入，尤其是下标index的使用。
以上两点我们在使用中需要根据自己的版本做相应调整了。
至此，展示表格数据的静态页面已经完成，接下来我们使用Vue.js使表格数据成为动态的。
五、 创建VUE对象、初始化表格数据
1.初始化数据
Tips: datas在实际的场景中应当是通过ajax的方式访问后台获取的业务数据。
2.创建vue对象
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.实现新增逻辑
好了，动态展示、新增和删除功能就讲完了，后边有空我们再来讨论页面上未实现的全选、快速检索等功能。
附1：完整js
var datas = [
{
code: "A2017-001",admin: "zero"
}];
new Vue({
el: "#vueApp",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
页面源码已共享至，欢迎探讨。
总结
以上所述是小编给大家介绍的使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
