重慶分公司
重慶分公司
使用Bootstrap+Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能
小編給大家分享一下使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南漳免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
一、寫(xiě)在前面
1. Bootstrap是一個(gè)由 Twitter 開(kāi)發(fā)和維護(hù)的前端框架，目前很受歡迎，Bootstrap中文網(wǎng)點(diǎn)擊這里。
2. Vue.js 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架，點(diǎn)這里訪問(wèn)官網(wǎng)。
二、實(shí)現(xiàn)效果：
三、頁(yè)面引入bootstrap、vue資源
這里需要注意的是，Boostrap依賴(lài)于JQuery，必須在引入Boostrap之前引入JQuery。
四、繪制表格
1.工具欄區(qū)
新增
保存
刪除
2.表格區(qū)
|
序號(hào) |
設(shè)備編號(hào) |
設(shè)備名稱(chēng) |
設(shè)備狀態(tài) |
采購(gòu)日期 |
設(shè)備管理員 |
|
{{index+1}} |
{{facility.code}} |
{{facility.name}} |
{{facility.states}} |
{{facility.date}} |
{{facility.admin}} |
這里需要說(shuō)明的是：
1.表格table的class Bootstrap3和Boostrap4有所不同；
2. vue.js for循環(huán)，vue1與vue2有所出入，尤其是下標(biāo)index的使用。
以上兩點(diǎn)我們?cè)谑褂弥行枰鶕?jù)自己的版本做相應(yīng)調(diào)整了。
至此，展示表格數(shù)據(jù)的靜態(tài)頁(yè)面已經(jīng)完成，接下來(lái)我們使用Vue.js使表格數(shù)據(jù)成為動(dòng)態(tài)的。
五、 創(chuàng)建VUE對(duì)象、初始化表格數(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在實(shí)際的場(chǎng)景中應(yīng)當(dāng)是通過(guò)ajax的方式訪問(wèn)后臺(tái)獲取的業(yè)務(wù)數(shù)據(jù)。
2.創(chuàng)建vue對(duì)象
new Vue({
el: "#vueApp",
data: {
checkAll: false,// 是否全選
checkedRows: [],// 選中的行標(biāo)，用于刪除行
facilities: datas,// 表格數(shù)據(jù)
newRow:{}// 新增的行數(shù)據(jù)，用于新增行
}
})ok，我們已經(jīng)完成了表格數(shù)據(jù)的動(dòng)態(tài)展示，下面我們來(lái)實(shí)現(xiàn)刪除行數(shù)據(jù)功能。
六、刪除行
刪除按鈕：
刪除
實(shí)現(xiàn)刪除功能：
delRows:function () {
if (this.checkedRows.length <= 0){//是否選中判斷
alert("您未選擇需要?jiǎng)h除的數(shù)據(jù)");
return false;
}
if (!confirm("您確定要?jiǎng)h除選擇的數(shù)據(jù)嗎？")){//刪除確認(rèn)
return false;
}
for(var i=0;i實(shí)現(xiàn)效果：
七、新增行
1.新增按鈕
新增
2.添加模態(tài)框用于錄入新增數(shù)據(jù)
新增設(shè)備信息
×
設(shè)備編號(hào)：
設(shè)備名稱(chēng)：
設(shè)備狀態(tài)：
采購(gòu)日期：
管理員：
確認(rèn)
3.實(shí)現(xiàn)新增邏輯
addRow: function () {
this.facilities.push(this.newRow);//新行數(shù)據(jù)追加至表格數(shù)據(jù)數(shù)組中
this.newRow = {};//新行數(shù)據(jù)置空
}
好了，動(dòng)態(tài)展示、新增和刪除功能就講完了，后邊有空我們?cè)賮?lái)討論頁(yè)面上未實(shí)現(xiàn)的全選、快速檢索等功能。
附1：完整js
頁(yè)面源碼已共享至GitHub， 點(diǎn)擊這里 可查看下載，歡迎探討。
以上是“使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱(chēng)：使用Bootstrap+Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能
鏈接地址：http://weahome.cn/article/jpccss.html
