Pagination 分页 封装
1、分页子组件
1 <template> 2 <div style="text-align: right; padding-right: 50px; padding-top: 15px"> 3 <el-button 4 size="mini" 5 @click="currentChange(currentPage)" 6 style="vertical-align: sub" 7 >刷新</el-button 8 > 9 <el-pagination 10 v-show="total > size" 11 @size-change="sizeChange" 12 @current-change="currentChange" 13 :current-page="currentPage" 14 :page-sizes="sizes" 15 :page-size="size" 16 :layout="layout || pageLayout" 17 :total="total" 18 > 19 </el-pagination> 20 </div> 21 </template> 22 23 <script> 24 export default { 25 data() { 26 return { 27 isSizeChange: false, 28 sizes: [10, 20, 30, 50, 100], //选择每页显示个数的选项 29 size: 20, //默认每页显示多少条数据 30 currentPage: 1, //当前页数 31 startIndex: 0, 32 pageLayout: "total, sizes, prev, pager, next, jumper", //组件布局 33 }; 34 }, 35 props: ["total", "layout"], 36 methods: { 37 /* 38 修改页码大小 39 */ 40 sizeChange(size) { 41 this.size = size; 42 var page = this.startIndex / size; 43 page = page + 1 - (page % 1); 44 this.currentPage = page == 0 ? 1 : page; 45 if (this.currentPage > 1) { 46 this.startIndex = (this.currentPage - 1) * this.size; 47 } else { 48 this.startIndex = 0; 49 } 50 this.isSizeChange = true; 51 this.$emit("on-change", size, this.currentPage); 52 }, 53 /* 54 当前页变动 55 */ 56 currentChange(page) { 57 var elTable = document.getElementsByClassName("el-table__body-wrapper"); 58 if (elTable.length) { 59 elTable[0].scrollTop = 0; 60 } 61 document.getElementById("app-main").scrollTop = 0; 62 this.currentPage = page; 63 this.startIndex = (page - 1) * this.size; 64 if (!this.isSizeChange) { 65 this.$emit("on-change", this.size, this.currentPage); 66 } 67 this.isSizeChange = false; 68 }, 69 }, 70 }; 71 </script>
2、父页面
1 <!-- 2 分页 3 queryList 获取table表单数据 4 --> 5 <pagination ref="page" @on-change="queryList" :total="result.total"></pagination>
3、获取table表单数据
1 queryList() { 2 this.formData.curPage = this.$refs.page.currentPage; //当前页码 3 this.formData.pageSize = this.$refs.page.size;//每页大小 4 5 // 调用查询接口 6 this.API.system.currencyList(this.formData).then(res => { 7 this.result = res.content; 8 }); 9 }
