Vue + iview implement table and paging and interaction with background data

Recently, I used the table paging function in my project. So I would like to share it with you to help you.

1 <template> 2 <div> 3 <Table: columns = "historycolumns": Data = "historydata"> </table> 4 <page: Total = "datacount ": page-size = "pagesize" show-total class = "Paging" @ on-change = "changepage" @ on-page-size-change = "pages" show-Sizer show- elevator show-total> </Page> 5 </div> 6 </template> 7 <style scoped> 8. paging {9 float: Left; 10 margin-top: 10px; 11} 12 </style> 13 <SCRIPT> 14 Import cookies from 'js-cookies '; 15 16 Export default {17 data () {18 return {19 ajaxhistorydata: [], 20 // total number of initialization information items 21 datacount: 0, 22 // How many entries are displayed per page 23 pagesize: 10, 24 Xia: 0, // The first index value of the next or previous page 25 historycolumns: [{26 "type ": "selection", 27 "align": "center", 28 "width": "30", 29 "classname": "border-R" 30 }, {31 "title": "username", 32 "align": "center", 33 "key": "username" 34 },{ 35 "title": "name ", 36 "align": "center", 37 "key": "name" 38 },{ 39 "title": "Organization", 40 "align ": "center", 41 "key": "deptname" 42}, {43 "title": "status", 44 "align": "center", 45 "key ": "status" 46 },{ 47 "title": "contact number", 48 "align": "center", 49 "key": "mobile" 50 51 }, {52 'title': 'operation', 53 'align ': 'center', 54 'key': 'action', 55 render: (H, Params) ==>{ 56 return H ('div ', [57 H ('icon', {58 props: {59 type: 'ios-baseball', 60 size: 16 61 }, 62 style: {63 marginleft: '20px '64} 65 66 67}) 68 69]) 70 71} 72}], 73 historydata: [] 74} 75 }, 76 Methods: {77 // get history information 78 handlelistapprovehistory () {79 let sessionid = cookies. get ('status'); 80 let this1 = This; 81 This. $ HTTP ({82 headers: {83 "Authorization": sessionid, 84}, 85 method: 'post', 86 URL: this1.global. base_url + '/sys/user/list', 87 Params: {88 'deptid': '001', 89 'offset': 0, // Index 90 'limit' for the first item on the first page: 10, // number of entries displayed on each page 91 },92}) 93. then (function (RES) {94 debugger 95 this1.ajaxhistorydata = res. data. data; 96 this1.datacount = res. data. total; 97 98 this1.historydata = this1.ajaxhistorydata; 99) 100. catch (function (error) {101 // 102}) 103 104}, 105 pages (Num) {// call 106 debugger107 this when you modify the number of entries displayed per page. pagesize = num; 108 this. changepage (1); 109}, 110 changepage (INDEX) {111 // index current page number 112 this. xia = (index-1) * This. pagesize; 113 114 115 let sessionid = cookies. get ('status'); 116 let this1 = This; 117 this. $ HTTP ({118 headers: {119 "Authorization": sessionid, 120}, 121 method: 'post', 122 URL: this1.global. base_url + '/sys/user/list', 123 Params: {124 'deptid': '001', 125 'offset': this1.xia, 126 'limit': this1.pagesize, 127}, 128}) 129. then (function (RES) {130 debugger131 this1.historydata = res. data. data; 132}) 133. catch (function (error) {134 // 135}) 136} 137}, 138 created () {139 this. handlelistapprovehistory (); 140} 141} 142 </SCRIPT>

View code

Some important parts of the Code are marked with comments. If you have any questions, leave a message.

Vue + iview implement table and paging and interaction with background data