2019獨角獸企業(yè)重金招聘Python工程師標準>>>

??????? 最近在學習vue.js，我把工作中項目里面的一個小實例用vue.js重構了下，寫成一個小demo，鞏固自己所學，并與大家分享，一起交流。

??????? 一、需求稿：

??????

??????? 狀態(tài)篩選欄：

????????

?????????? 篩選后：

????????????

?????????? 用戶操作彈出層：

??????????? 1.“重試”彈出層

??????????? 點擊重試：狀態(tài)變?yōu)椤斑M行中”

??????????? 點擊刪除：刪除該行數(shù)據(jù)

????????????

??????????? 2.“取消”彈出層

????????????點擊確定：該行數(shù)據(jù)狀態(tài)變?yōu)椤笆　?/p>

????????????

??????????? 3.“下載”彈出層

????????????點擊下載：下載該文件（暫不做，以alert為成功提示）

????????????

?? ??????? 二.html 結構

<div class="table-demo container" id="app"><div class="row table-search"><h1>vue-table小樣例</h1></div><div class="row"><table class="my-table table table-bordered"><thead><tr><th class="list" @click="sort":class="{'top':isTop,'down':!isTop}">任務ID</th><th class="list">內容</th><th class="list">依賴文件</th><th class="list">完成時間</th><th class="list">耗時</th><th class="status" :class="{'open':isSetstatus}" @click="setStatus">狀態(tài)（{{statusName}}）<ul class="slidedown"><li @click="filterComplete('全部')">全部</li><li @click="filterComplete('完成')">完成</li><li @click="filterComplete('失敗')">失敗</li><li @click="filterComplete('進行中')">進行中</li></ul></th><th class="list">操作</th></tr></thead><tbody><tr v-for="(item,index) in tableData"><td>{{item.id}}</td><td>{{item.content}}</td><td>{{item.document}}</td><td>{{item.completeTime | conTimeFormat}}</td><td>{{item.time | timeFormat}}</td><td :class="{'red':item.status==='失敗','green':item.status==='完成','orange':item.status==='進行中'}">{{item.status}}</td><td v-if="item.status==='完成'"><a href="##" @click="adminSet(1,index)">下載</a></td><td v-else-if="item.status==='進行中'"><a href="##" @click="adminSet(2,index)">取消</a></td><td v-else="item.status==='失敗'"><a href="##" @click="adminSet(3,index)">重試</a></td></tr></tbody></table></div><div class="layer-box" :class="{'open':isLayer}"><my-layer :message="layerMessage"></my-layer></div> </div><!-- 彈出框組件 --> <script type="text/x-template" id="layer"><div class="layer"><h2>標題</h2><div class="content">{{message.content}}</div><div class="footer"><template v-if="message.type==='onload'"><a href="##" @click="closed">{{message.btn1}}</a><a href="##" @click="onload">{{message.btn2}}</a></template><template v-else-if="message.type==='cancel'"><a href="##" @click="closed">{{message.btn1}}</a><a href="##" @click="cancel">{{message.btn2}}</a></template><template v-else><a href="##" @click="remove">{{message.btn1}}</a><a href="##" @click="reset">{{message.btn2}}</a></template></div></div> </script>

?

??????????? 三.js

// 全局注冊的彈出框組件 Vue.component('myLayer',{// prop 接收數(shù)據(jù)props: {message: {type: Object}},// 組件的模板template: '#layer',methods: {// 關閉彈出框closed: function(){app.isLayer = false;},// 下載onload: function(){alert('下載成功');app.isLayer = false;},// 取消任務cancel: function(){app.tableData[app.itemIndex]['status'] = '失敗';app.isLayer = false;},// 刪除任務remove: function(){app.tableData.splice(app.itemIndex,1);app.isLayer = false;},// 重試任務reset: function(){app.tableData[app.itemIndex]['status'] = '進行中';app.isLayer = false;}} });// 實例化vue對象 var app = new Vue({el: '#app',data: {tableData: [],isSetstatus: false,layerMessage: {btn1: '',btn2: '',content: ''},isLayer: false,itemIndex: 0,isTop: true,statusName: '全部'},created: function(){// jsonObject.body 為模擬的數(shù)據(jù)this.tableData = jsonObject.body;},filters: {// 格式化時間conTimeFormat: function(v){var time = new Date(parseFloat(v));var year = time.getFullYear();var month = time.getMonth()<10?'0'+time.getMonth():time.getMonth();var day = time.getDate();var hour = time.getHours();var minutes = time.getMinutes();var seconds = time.getSeconds();var formatTime = year + '年' + month + '月' + day + '日'+ ' ' + hour + '時' + minutes + '分' + seconds + '秒';return formatTime;},timeFormat: function(v){return v + 's';}},methods: {// 打開或關閉狀態(tài)欄setStatus: function(){this.isSetstatus = !this.isSetstatus;},// 狀態(tài)篩選filterComplete: function(statusName){var _this = this;this.tableData = jsonObject.body;var newTableData = [];if(statusName!=='全部'){this.tableData.forEach(function(v,i){if(v.status === statusName){newTableData.push(v);}});this.tableData = newTableData;}this.statusName = statusName;},// 用戶操作 下載 取消 重試adminSet: function(value,index) {var loadMessage = null;switch(value) {case 1: loadMessage = {btn1: '取消',btn2: '下載',content: '您確定下載此文件嗎？',type: 'onload'}break;case 2:loadMessage = {btn1: '考慮一下',btn2: '確定',content: '您確定取消該任務嗎？',type: 'cancel'}break;case 3:loadMessage = {btn1: '刪除',btn2: '重試',content: '是否重試該任務？',type: 'reset'}break;}this.isLayer = true;this.layerMessage = loadMessage;this.itemIndex = index;},// 任務id排序sort: function(){var temp;var newTableData = [];this.tableData.forEach(function(v,i){newTableData.push(v);});if(this.isTop){// 從大到小排序for(var i=0;i<newTableData.length-1;i++){for(var j=i+1;j<newTableData.length;j++){if((newTableData[i]['id'] - newTableData[j]['id'])<0){temp = newTableData[i];newTableData[i] = newTableData[j];newTableData[j] = temp;}}}this.isTop = false;}else {// 從小到大排序for(var i=0;i<newTableData.length-1;i++){for(var j=i+1;j<newTableData.length;j++){if((newTableData[i]['id'] - newTableData[j]['id'])>0){temp = newTableData[i];newTableData[i] = newTableData[j];newTableData[j] = temp;}}}this.isTop = true;}this.tableData = newTableData;}} });

?

ps: 源碼在我的github上：https://github.com/helsingVan/vue-demo.git

歡迎糾正以及提bug。

?

轉載于:https://my.oschina.net/huskydog/blog/858311

總結

以上是生活随笔為你收集整理的运用vue.js写的表格小demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。