一、寫在前面
1. Bootstrap是一個由 Twitter 開發(fā)和維護的前端框架，目前很受歡迎，Bootstrap中文網(wǎng)點擊這里。
2. Vue.js 是一套構建用戶界面的漸進式框架，點這里訪問官網(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， 點擊這里 可查看下載，歡迎探討。
總結
以上所述是小編給大家介紹的使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
