使用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实现表格的动态展示、新增和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!
