這篇文章主要介紹Vue.js怎么實現(xiàn)可編輯的表格,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|企業(yè)網(wǎng)站維護|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗,為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù),案例作品覆蓋成都假山制作等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身策劃品質(zhì)網(wǎng)站。
具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" > <style type="text/css"> table tr td{ text-align: center; } .btn-info{ margin-left: 5px; } .add,.addBox{ margin: 10px 0px 10px 10px; } .submit{ margin-left: 172px; } /*全刪*/ .delAll{ margin-left: 10px; } /*新增*/ fieldset{ margin-left: 10px; } </style> </head> <body> <div id="app"> <button class="btn btn-primary btn-sm addBox" @click="addBox">添加</button> <button class="btn btn-sm btn-danger delAll" @click="delAll">批量刪除</button> <table class="table table-bordered" > <thead> <tr> <td><input type="checkbox" @click="allSelect" v-model="checked"></td> <td>學(xué)號</td> <td>姓名</td> <td>年紀</td> <td>操作</td> </tr> </thead> <tbody> <tr v-for="person,index in people"> <td><input type="checkbox" v-model="selected" v-bind:value="person.sid"></td> <td @click="edit(index)" contenteditable="true">{{person.sid}}</td> <td @click="edit(index)" contenteditable="true">{{person.sname}}</td> <td @click="edit(index)" contenteditable="true">{{person.sage}}</td> <td><button @click="del(index)" class="btn btn-danger btn-sm">刪除</button><button @click="update(index)" class="btn btn-info btn-sm">編輯</button></td> </tr> </tbody> </table> <fieldset v-show="seen" > <legend>新增用戶</legend> <div class=""> <p> <label>學(xué)號:</label> <input type="text" v-model="newPeople.sid"> </p> <p> <label>姓名:</label> <input type="text" v-model="newPeople.sname"> </p> <p> <label>年齡:</label> <input type="number" v-model="newPeople.sage"> </p> <p> <button class="btn btn-success btn-sm submit" @click="add">提交</button> </p> </div> </fieldset> <!-- 編輯界面 --> <fieldset v-show="editSeen"> <legend>編輯用戶</legend> <div class=""> <p> <label>學(xué)號:</label> <input type="text" v-model="editPeople.sid" value="{{sid}}"> </p> <p> <label>姓名:</label> <input type="text" v-model="editPeople.sname" value="{{sname}}"> </p> <p> <label>年齡:</label> <input type="number" v-model="editPeople.sage" value="{{sage}}"> </p> <p> <button class="btn btn-success btn-sm submit" @click="editSubmit">提交</button> </p> </div> </fieldset> </div> <script type="text/javascript" src="vue.min.js"></script> <script type="text/javascript"> var data ={ people:[ {'sid':'1043','sname':'張三','sage':18}, {'sid':'2434','sname':'趙六','sage':43}, {'sid':'3424','sname':'李四','sage':42}, {'sid':'1231','sname':'王五','sage':35} ], newPeople:{ 'sid':'','sname':'','sage':'' }, seen:false, editSeen:false, checked:false, selected:[], editPeople:{ 'sid':'','sname':'','sage':'' } } ; var app = new Vue({ 'el':'#app', data:data, methods:{ // 添加 addBox:function(){ this.seen = this.seen == false ? true : false; }, //刪除 del:function(index){ console.log(11); this.people.splice(index,1); }, //提交 add:function(){ //插入到people中 this.people.push(this.newPeople); this.newPeople = {}; this.seen = false }, //全選 allSelect:function(){ if(this.selected.length != this.people.length){ this.selected = []; for(var i = 0; i<this.people.length;i++){ this.selected.push(this.people[i].sid); console.log(this.people[i].sid); } }else{ this.selected = []; } }, //批量刪除 delAll:function(){ for(var j = 0; j< this.selected.length;j++){ for(var i = 0; i< this.people.length; i++){ if(this.selected[j] == this.people[i].sid){ this.people.splice(i,1); } } } }, //編輯 update:function(index){ this.editSeen = true; this.editPeople = this.people[index]; }, //編輯后提交 editSubmit:function(){ this.editSeen = false; } }, watch:{ "selected":function(){ if(this.selected.length == this.people.length){ this.checked = true; }else{ this.checked = false; } } } }) </script> </body> </html>
以上是“Vue.js怎么實現(xiàn)可編輯的表格”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標題:Vue.js怎么實現(xiàn)可編輯的表格
本文URL:http://bm7419.com/article44/gegehe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、微信公眾號、定制網(wǎng)站、網(wǎng)站營銷、域名注冊、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)