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

前端之家收集整理的这篇文章主要介绍了使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、写在前面

1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,

2. Vue.js 是一套构建用户界面的渐进式框架,

二、实现效果

三、页面引入bootstrap、vue资源

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

四、绘制表格

1.工具栏区

搜索">

2.表格区

Box"> 序号 设备编号 设备名称 设备状态 采购日期 设备管理员 Box" :value="index" v-model="checkedRows">

这里需要说明的是:

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

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

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

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

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

1.初始化数据

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

2.创建vue对象

删除行 facilities: datas,// 表格数据 newRow:{}// 新增的行数据,用于新增行 } })

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

六、删除

删除按钮:

删除

实现删除功能

删除的数据"); 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.新增按钮

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

管理员:
管理员" v-model="newRow.admin">

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实现表格的动态展示、新增和删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/35032.html
bootstrapbootstrapvue.js表格动态展示删除删除删除新增

猜你在找的Bootstrap相关文章