vue+iview实现table和分页及与后台数据交互

Posted 2021-01-16 lxl0419

最近在项目中遇到使用table分页的功能，所以分享出来给大家希望能够对大家有帮助，话不多说直接上代码

  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-cookie‘;
 15 
 16     export default {
 17         data() {
 18             return {
 19                 ajaxHistoryData: [],
 20                 // 初始化信息总条数
 21                 dataCount: 0,
 22                 // 每页显示多少条
 23                 pageSize: 10,
 24                 xia: 0, //下一页或者上一页的第一项索引值
 25                 historyColumns: [{
 26                     "type": "selection",
 27                     "align": "center",
 28                     "width": "30",
 29                     "className": "border-r"
 30                 }, {
 31                     "title": "用户名",
 32                     "align": "center",
 33                     "key": "username"
 34                 }, {
 35                     "title": "姓名",
 36                     "align": "center",
 37                     "key": "name"
 38                 }, {
 39                     "title": "所属组织机构",
 40                     "align": "center",
 41                     "key": "deptName"
 42                 }, {
 43                     "title": "状态",
 44                     "align": "center",
 45                     "key": "status"
 46                 }, {
 47                     "title": "联系电话",
 48                     "align": "center",
 49                     "key": "mobile"
 50 
 51                 }, {
 52                     ‘title‘: ‘操作‘,
 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             // 获取历史记录信息
 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, //第一页第一项的索引
 90                             ‘limit‘: 10, //每页显示的条数
 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) { //修改每页显示条数时调用
106                 debugger
107                 this.pageSize = num;
108                 this.changepage(1);
109             },
110             changepage(index) {
111                 //index当前页码
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                         debugger
131                         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

代码中一些重要的部分都有标记了注释，如果还有不懂得地方大家可以留言