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

一、写在前面

1.引导程序是一个由推特开发和维护的前端框架，目前很受欢迎自举中文网点击这里。

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

二、实现效果：

三、页面引入bootstrap、vue资源

链接rel='样式表href='//cdn。bootstrapcdn。com/font-awesome/4。7 .0/CSS/font-牛逼。CSS ' rel='外部nofollow' link rel='样式表href='//maxcdn。bootstrapcdn。com/bootstrap/4。0 .0-beta。2/CSS/bootstrap。量滴CSS ' rel='外部no follow ' script src=' http://cdn。bootstrapcdn。com/jquery/3。2 .1/这里需要注意的是助推器，依赖于JQuery，必须在引入助推器之前引入JQuery。

四、绘制表格

1.工具栏区

div class=' row MX-auto w-75 ' div class=' col-6 ' div class=' BTN-group ' button type=' button ' class=' BTN BTN-大纲-信息BTN-sm ' data-toggle=' modal ' data-target=' # “我的模式”新增/button button type=' button ' class=' BTNBTN-大纲-主要BTN-sm ' @ click=' SaveRows '保存/button/div button type=' button ' class=' BTNBTN-大纲-警告BTN-sm ' @ click=' DelRows '删除/button/div class=' col-6 ' div class=' input-group ' input type=' text ' class=' form-control input-group-sm ' placeholder='输入设备编号进行搜索“输入-组-BTN”按钮=“BTN BTN-默认”按钮2 .表格区

div class=' row MX-auto w-75 ' div class=' col-12 ' table class=' table-table-悬停table-success”和class=“ad-default”tr thin put type=“checkbox ”/th序号/th设备编号/th设备名称/th设备状态/th采购日期/th设备管理员/th/tr/TD t车身tr-v-for='(设施，索引)在设施t输入类型=' checkbox ' :值=' index ' v-model=' checked rows '/TD { { index 1 } }/TD { { facility }。代码} }/TD { {设施。代码} }/TD { {设施。名称} }/TD TD { {设施。状态} }/TD TD { {设施。日期} }/TD/tr/t正文/表格/div/这里需要说明的是：

1.表格桌子的类Bootstrap3和助推器四有所不同；

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

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

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

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

1.初始化数据

var数据=[{代码： ' a 2017-001 '，名称： '3800充电器，州： '正常，日期： '2017-01-21 ',管理员： 'andy' }，{ 0代码： 'A2017-002 '，名称： '联想c型转接器，州： '正常，日期： '2017-01-21 '，管理员： '零' }]；Tips:数据在实际的场景中应当是通过创建交互式、快速动态网页应用的网页开发技术的方式访问后台获取的业务数据。

2.创建某视频剪辑软件对象

new Vue({ el: '#vueApp '，data: { checkAll: false，//是否全选checkedRows: []，//选中的行标，用于删除行设施：数据，//表格数据newRow:{}//新增的行数据，用于新增行} })好的，我们已经完成了表格数据的动态展示，下面我们来实现删除行数据功能。

六、删除行

删除按钮：

button type=' button ' class=' BTN BTN-轮廓-警告BTN-sm ' @ click=' DelRows '删除/按钮实现删除功能：

delrows 3360 FuncTion(){ if(this。检查行。长度=0){//是否选中判断警报('您未选择需要删除的数据');返回false} if(！确认('您确定要删除选择的数据吗？')){//删除确认返回false}表示(var I=0；长度；i ){//循环获取选中的行标var checkedRowIndex=这个。checkedrows[I]；/**根据下标移除数组元素*/this.facilities=$ .grep(this.facilities，function (facility，j) { return j！=checkedRowIndex })；}这个。选中的行=[]；//清空选中行数据}实现效果：

七、新增行

1.新增按钮

button type=' button ' class=' BTN BTN-大纲-信息BTN-sm ' data-toggle=' modal ' data-target=' # my modal '新增/button2 .添加模态框用于录入新增数据

div class=' modal fade ' id=' myModal ' div class=' modal-dialog ' div class=' modal-content ' div class=' modal-header ' H4 class=' modal-title '新增设备信息/H4按钮类型=' button ' class=' close ' data-dispose=' modal '/button/div class=' modal-body ' div class=' row ' div class=' col-3 '设备编号：/div class=' col-9 '输入类=“表单控件”占位符='设备编号v-model=' NewRow。代码'/div/div class=' row ' div class=' col-3 '设备名称：/div class=' col-9 '输入类=“表单控件”占位符='设备名称v-model=' NewRow。名称'/div/div class=' row ' div class=' col-3 '设备状态：/div class=' col-9 '输入类=“表单控件”占位符='设备状态v-model=' NewRow。States '/div/div class=' row ' div class=' col-3 '采购日期：/div class=' col-9 '输入类=“表单控件”占位符='采购日期v-model=' NewRow。日期'/div/div class=' row ' div class=' col-3 '管理员：/div class=' col-9 '输入类=“表单控件”占位符='管理员v-model=' NewRow。admin '/div/div/div class='模态-页脚'按钮类型=' button ' class=' BTN BTN-大纲-主' data-dispose=' modal ' @ click=' AddRow '确认/button/div/div/3实现新增逻辑

addRow:函数(){这个。设施。推(这个。新行)；//新行数据追加至表格数据数组中这个。NewRow={ }；//新行数据置空}

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

附1:完整射流研究…

脚本变量数据=[ { code: 'A2017-001 '，名称： '3800充电器，州： '正常，日期： '2017-01-21 ',管理员： 'andy' }，{ 0代码： 'A2017-002 '，名称： '联想c型转接器，州： '正常，日期： '2017-01-21 '，管理员： '零' }]；new Vue({ El : ' # VuEapp }，data: { checkAll: false，checked dows :[]，facilities: datas，new row : } }，methods : { add row : function(){ this。设施。推(这个。新行)；这个。NewRow={ }；}，saverows3360函数(){//保存表格数据}，Delrows 3360 FuncTion(){ if(this。检查行。长度=0){ alert('您未选择需要删除的数据');返回false} if(！确认('您确定要删除选择的数据吗？')){返回false}表示(var I=0；长度；I){ var checkedRowIndex=this。checkedrows[I]；这.设施=美元.grep(this.facilities，function (facility，j) { return j！=checkedRowIndex })；}这个。选中的行=[]；} } });/script页面源码已共享至GitHub，点击这里可查看下载，欢迎探讨。

总结

以上所述是小编给大家介绍的使用Bootstrap Vue.js实现表格的动态展示、新增和删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！