資料列表實現方式（基於Vue.js封裝）
阿新 • • 發佈：2019-01-02
抽時間看了下Vue.js，果然好清爽。
寫了個小demo，實現Table方式的列表。
如下：
先貼效果，即每個開發人員實現功能時需要寫的程式碼：
<html> <head> <script src="vue.js"></script> <script src="vue-common.js"></script> <style> td,th{ border : solid 1px black; } </style> </head> <body> <div id="userList"> <div><h1>{{ title }}</h1></div> <table> <tr> <th>姓名</th> <th>地址</th> <th>電話</th> </tr> <tr v-for="row in rows"> <td>{{ row.name }}</td> <td>{{ row.addr }}</td> <td><input v-model='row.mobile' /></td> </tr> </table> <paging v-bind:data="paging" /> </div> <button onclick="submitUserList()">提交</button> <div id="submitData"></div> <script> // 1. 頁面初始化時獲得資料（一般通過ajax方式） var data = { title : '列表資料', rows: [ { name: 'Liu Hailong' , addr : 'Laishui', mobile : '186' }, { name: 'Wei Chao' , addr : 'Yangzonghai', mobile : '186' }, { name: 'Hu Lei' , addr : 'Guiyang', mobile : '188' } ], paging : { total : 3, pageSize : 10, pageNo : 1 , pageCnt : 1 } }; // 2. 將資料與檢視繫結 var userList = bind('#userList',data); // 3. 資料發生可能的修改 data.title = "列表資料（被修改）"; data.rows[0].mobile = '18600107299'; // 4. 提交資料到後臺(可編輯表格，或分頁) //submit(data.rows); //submit(data.paging); function submitUserList(){ var d = userList.$data; console.log(d.rows[2].name + ":" + d.rows[2].mobile); } </script> </body> </html>
然後是 簡單的封裝程式碼：
/** * vue-common.js */ Vue.component('paging', { props: ['data'], template: [ '<div>共{{ data.total }}條 每頁{{ data.pageSize }}條' , '第{{ data.pageNo }}頁/共{{ data.pageCnt }}頁' , '<button>首頁</button>', '<button>首頁</button>', '<button>首頁</button>', '<button>末頁</button></div>'].join('\r\n') }); function bind(selector, data){ var ret = getVueObj(selector, data); return ret; } function getVueObj(selector, data){ var ret = new Vue(getWrapper(selector, data)); return ret; } function getWrapper(selector, data){ var ret = { el : selector, data : data }; return ret; }
如果繼續封裝，頁面初始化載入資料的程式碼：
function loadList(selector , url, callback){
ajax({
url : url ,
success : function(data){
var vueObj = bind(selector, data);
callback(vueObj);
}
});
}