使用Bootstrap + Vue.js实现表格的动态展示、新增和(3)
3.实现新增逻辑
addRow: function () { this.facilities.push(this.newRow);//新行数据追加至表格数据数组中 this.newRow = {};//新行数据置空 }
好了,动态展示、新增和删除功能就讲完了,后边有空我们再来讨论页面上未实现的全选、快速检索等功能。
附1:完整js
<script> 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" }]; new Vue({ el: "#vueApp", data: { checkAll: false, 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<this.checkedRows.length;i++){ var checkedRowIndex = this.checkedRows[i]; this.facilities = $.grep(this.facilities,function (facility,j) { return j != checkedRowIndex; }); } this.checkedRows = []; } } }); </script>
页面源码已共享至GitHub, 点击这里 可查看下载,欢迎探讨。
总结
以上所述是小编给大家介绍的使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!