使用Bootstrap + Vue.js实现表格的动态展示、新增和(2)

日期：2020-05-11 栏目：程序人生浏览：次

这里需要说明的是：

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

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

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

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

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

1.初始化数据

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"
 }];

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

2.创建vue对象

new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,// 是否全选
  checkedRows: [],// 选中的行标，用于删除行
  facilities: datas,// 表格数据
  newRow:{}// 新增的行数据，用于新增行
 }
 })

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

六、删除行

删除按钮：

<button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>

实现删除功能：

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 = [];//清空选中行数据
  }

实现效果：

七、新增行

1.新增按钮

<button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>

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

<div class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
   <h4 class="modal-title">新增设备信息</h4>
   <button type="button" class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
   <div class="row">
   <div class="col-3">设备编号：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备编号" v-model="newRow.code">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备名称：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备名称" v-model="newRow.name">
   </div>
   </div>
   <div class="row">
   <div class="col-3">设备状态：</div>
   <div class="col-9">
    <input class="form-control" placeholder="设备状态" v-model="newRow.states">
   </div>
   </div>
   <div class="row">
   <div class="col-3">采购日期：</div>
   <div class="col-9">
    <input class="form-control" placeholder="采购日期" v-model="newRow.date">
   </div>
   </div>
   <div class="row">
   <div class="col-3">管理员：</div>
   <div class="col-9">
    <input class="form-control" placeholder="管理员" v-model="newRow.admin">
   </div>
   </div>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
  </div>
  </div>
 </div>
 </div>

转载注明出处：http://www.heiqu.com/1162.html

使用Bootstrap + Vue.js实现表格的动态展示、新增和(2)

相关推荐