使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除功能

更新時間：2017年11月27日 09:42:45 作者：louie孫

這篇文章主要介紹了使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除功能,需要的朋友可以參考下

一、寫在前面

1. Bootstrap是一個由 Twitter 開發(fā)和維護的前端框架，目前很受歡迎，Bootstrap中文網(wǎng)點擊這里。

2. Vue.js 是一套構(gòu)建用戶界面的漸進式框架，點這里訪問官網(wǎng)。

二、實現(xiàn)效果：

三、頁面引入bootstrap、vue資源

<link rel="stylesheet"  rel="external nofollow" >
<link rel="stylesheet"  rel="external nofollow" >
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>

這里需要注意的是，Boostrap依賴于JQuery，必須在引入Boostrap之前引入JQuery。

四、繪制表格

1.工具欄區(qū)

<div class="row mx-auto w-75">
 <div class="col-6">
  <div class="btn-group">
  <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
  <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
  </div>
  <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">刪除</button>
 </div>
 <div class="col-6">
  <div class="input-group">
  <input type="text" class="form-control input-group-sm" placeholder="輸入設備編號進行搜索">
  <span class="input-group-btn">
   <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
   </span>
  </div>
 </div>
 </div>

2.表格區(qū)

<div class="row mx-auto w-75">
 <div class="col-12">
  <table class="table table-hover table-success">
  <thead class="thead-default">
  <tr>
   <th><input type="checkbox"></th>
   <th>序號</th>
   <th>設備編號</th>
   <th>設備名稱</th>
   <th>設備狀態(tài)</th>
   <th>采購日期</th>
   <th>設備管理員</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(facility,index) in facilities">
   <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
   <td>{{index+1}}</td>
   <td>{{facility.code}}</td>
   <td>{{facility.name}}</td>
   <td>{{facility.states}}</td>
   <td>{{facility.date}}</td>
   <td>{{facility.admin}}</td>
  </tr>
  </tbody>
  </table>
 </div>
 </div>

這里需要說明的是：

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

2. vue.js for循環(huán)，vue1與vue2有所出入，尤其是下標index的使用。

以上兩點我們在使用中需要根據(jù)自己的版本做相應調(diào)整了。

至此，展示表格數(shù)據(jù)的靜態(tài)頁面已經(jīng)完成，接下來我們使用Vue.js使表格數(shù)據(jù)成為動態(tài)的。

五、創(chuàng)建VUE對象、初始化表格數(shù)據(jù)

1.初始化數(shù)據(jù)

var datas = [
 {
  code: "A2017-001",
  name: "3800充電器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c轉(zhuǎn)接器",
  states: "正常",
  date: "2017-01-21",
  admin: "zero"
 }];

Tips: datas在實際的場景中應當是通過ajax的方式訪問后臺獲取的業(yè)務數(shù)據(jù)。

2.創(chuàng)建vue對象

new Vue({
 el: "#vueApp",
 data: {
  checkAll: false,// 是否全選
  checkedRows: [],// 選中的行標，用于刪除行
  facilities: datas,// 表格數(shù)據(jù)
  newRow:{}// 新增的行數(shù)據(jù)，用于新增行
 }
 })

ok，我們已經(jīng)完成了表格數(shù)據(jù)的動態(tài)展示，下面我們來實現(xiàn)刪除行數(shù)據(jù)功能。

六、刪除行

刪除按鈕：

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

實現(xiàn)刪除功能：

delRows:function () {
  if (this.checkedRows.length <= 0){//是否選中判斷
   alert("您未選擇需要刪除的數(shù)據(jù)");
   return false;
  }
  if (!confirm("您確定要刪除選擇的數(shù)據(jù)嗎？")){//刪除確認
   return false;
  }

  for(var i=0;i<this.checkedRows.length;i++){//循環(huán)獲取選中的行標
   var checkedRowIndex = this.checkedRows[i];
   /**根據(jù)下標移除數(shù)組元素*/
   this.facilities = $.grep(this.facilities,function (facility,j) {
   return j != checkedRowIndex;
   });
  }
  this.checkedRows = [];//清空選中行數(shù)據(jù)
  }

實現(xiàn)效果：

七、新增行

1.新增按鈕

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

2.添加模態(tài)框用于錄入新增數(shù)據(jù)

<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">設備狀態(tài)：</div>
   <div class="col-9">
    <input class="form-control" placeholder="設備狀態(tài)" 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>

3.實現(xiàn)新增邏輯

addRow: function () {
  this.facilities.push(this.newRow);//新行數(shù)據(jù)追加至表格數(shù)據(jù)數(shù)組中
  this.newRow = {};//新行數(shù)據(jù)置空
  }

好了，動態(tài)展示、新增和刪除功能就講完了，后邊有空我們再來討論頁面上未實現(xiàn)的全選、快速檢索等功能。

附1：完整js

<script>
 var datas = [
 {
  code: "A2017-001",
  name: "3800充電器",
  states: "正常",
  date: "2017-01-21",
  admin: "andy"
 },
 {
  code: "A2017-002",
  name: "Lenovo Type-c轉(zhuǎn)接器",
  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 () {//保存表格數(shù)據(jù)
  },
  delRows:function () {
  if (this.checkedRows.length <= 0){
   alert("您未選擇需要刪除的數(shù)據(jù)");
   return false;
  }
  if (!confirm("您確定要刪除選擇的數(shù)據(jù)嗎？")){
   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，點擊這里可查看下載，歡迎探討。

總結(jié)

以上所述是小編給大家介紹的使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

用Axios Element實現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實現(xiàn)全局的請求loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
vue實現(xiàn)抽獎效果Demo
這篇文章主要介紹了vue實現(xiàn)抽獎效果Demo,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue中如何使用echarts動態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關于vue中如何使用echarts動態(tài)渲染數(shù)據(jù)的相關資料,echarts是一款基于JavaScript的開源可視化圖表庫,它通過簡單的配置即可實現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下
2023-11-11
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue?uni-app框架實現(xiàn)上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺
2022-09-09
mpvue寫一個CPASS小程序的示例
這篇文章主要介紹了mpvue寫一個CPASS小程序的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
通過vue.extend實現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關于通過vue.extend實現(xiàn)消息提示彈框的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
用Vue.extend構(gòu)建消息提示組件的方法實例
本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下
2017-08-08
Vue+FormData+axios實現(xiàn)圖片上傳功能
這篇文章主要為大家學習介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能，本文為大家整理了詳細步驟，感興趣的小伙伴可以了解一下
2023-08-08
vue3利用customRef實現(xiàn)防抖
防抖就是對于頻繁觸發(fā)的事件添加一個延時同時設定一個最小觸發(fā)間隔,防抖大家都學過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細講講
2023-10-10