春风项目四线(合箱线、总装线)
懒羊羊
2024-01-15 1558d8b4bb1f928a79b6c3c03ae1aa0f3c5b4a83
提交 | 用户 | 时间
fd2207 1 <template>
2   <div :class="{'hidden':hidden}" class="pagination-container">
3     <el-pagination
4       :background="background"
5       :current-page.sync="currentPage"
6       :page-size.sync="pageSize"
7       :layout="layout"
8       :page-sizes="pageSizes"
9       :pager-count="pagerCount"
10       :total="total"
11       v-bind="$attrs"
12       @size-change="handleSizeChange"
13       @current-change="handleCurrentChange"
14     />
15   </div>
16 </template>
17
18 <script>
19 import { scrollTo } from '@/utils/scroll-to'
20
21 export default {
22   name: 'Pagination',
23   props: {
24     total: {
25       required: true,
26       type: Number
27     },
28     page: {
29       type: Number,
30       default: 1
31     },
32     limit: {
33       type: Number,
34       default: 20
35     },
36     pageSizes: {
37       type: Array,
38       default() {
39         return [10, 20, 30, 50]
40       }
41     },
42     // 移动端页码按钮的数量端默认值5
43     pagerCount: {
44       type: Number,
45       default: document.body.clientWidth < 992 ? 5 : 7
46     },
47     layout: {
48       type: String,
49       default: 'total, sizes, prev, pager, next, jumper'
50     },
51     background: {
52       type: Boolean,
53       default: true
54     },
55     autoScroll: {
56       type: Boolean,
57       default: true
58     },
59     hidden: {
60       type: Boolean,
61       default: false
62     }
63   },
64   data() {
65     return {
66     };
67   },
68   computed: {
69     currentPage: {
70       get() {
71         return this.page
72       },
73       set(val) {
74         this.$emit('update:page', val)
75       }
76     },
77     pageSize: {
78       get() {
79         return this.limit
80       },
81       set(val) {
82         this.$emit('update:limit', val)
83       }
84     }
85   },
86   methods: {
87     handleSizeChange(val) {
88       if (this.currentPage * val > this.total) {
89         this.currentPage = 1
90       }
91       this.$emit('pagination', { page: this.currentPage, limit: val })
92       if (this.autoScroll) {
93         scrollTo(0, 800)
94       }
95     },
96     handleCurrentChange(val) {
97       this.$emit('pagination', { page: val, limit: this.pageSize })
98       if (this.autoScroll) {
99         scrollTo(0, 800)
100       }
101     }
102   }
103 }
104 </script>
105
106 <style scoped>
107 .pagination-container {
108   background: #fff;
109   padding: 32px 16px;
110 }
111 .pagination-container.hidden {
112   display: none;
113 }
114 </style>