封裝分頁 不能直接到很大頁號的最後一頁
阿新 • • 發佈：2021-11-08
因為後端不能做到直接到很大資料的最後幾頁或者最後一頁，element的都是自帶最後一頁的，所以自己封裝了一個
1 <template> 2 <div class="jspagination flex"> 3 <p class="total">共 {{ total }} 條</p> 4 <el-select v-model="value" @change="valueChange"> 5 <el-option 6 v-for="item in options" 7:key="item.value" 8 :label="item.label" 9 :value="item.value" 10 > 11 </el-option> 12 </el-select> 13 <div class="m-l20 total cursor" @click="goOne" v-if="currentTotal > 9"> 14 首頁 15 </div> 16 <div class="flex m-l10"> 17<span 18 :class=" 19 currentPage == 1 || currentbox.lenght == 1 ? 'cur_disable' : 'cursor' 20 " 21 @click="prev" 22 > 23 <i class="el-icon-arrow-left bold"></i 24 ></span> 25 <div class="numbox"> 26<div class="flex"> 27 <p 28 v-for="(item, index) in currentbox" 29 :key="index" 30 class="num cursor" 31 :class="currentPage == item ? 'active' : ''" 32 @click="number(item)" 33 > 34 {{ item }} 35 </p> 36 </div> 37 </div> 38 <span 39 class="cursor" 40 @click="next" 41 :class=" 42 currentbox.lenght == 1 || currentPage == currentbox.lenght 43 ? 'cur_disable' 44 : 'cursor' 45 " 46 > 47 <i class="el-icon-arrow-right bold"></i 48 ></span> 49 </div> 50 <p class="m-l10 dqdjy"> 51 當前第 <i style="font-size:20px;color: #000">{{ 52 currentPage 53 }}</i 54 > 頁 55 </p> 56 </div> 57 </template> 58 59 <script> 60 import { forEach } from "jszip"; 61 export default { 62 name: "Jspagination", 63 components: {}, 64 props: ["total"], 65 data() { 66 return { 67 options: [ 68 { 69 value: 10, 70 label: "10條/頁" 71 }, 72 { 73 value: 20, 74 label: "20條/頁" 75 }, 76 { 77 value: 30, 78 label: "30條/頁" 79 } 80 ], 81 value: 10, 82 currentPage: 1, 83 currentbox: [], 84 totalbox: [], 85 currentTotal: 0, 86 num: 0 87 }; 88 }, 89 computed: {}, 90 watch: { 91 total() { 92 if (this.total) { 93 // 向上取整 94 this.currentTotal = Math.ceil(this.total / this.value); 95 this.totalbox = []; 96 this.currentbox = []; 97 this.currentPage = 1; 98 if (this.currentTotal > 9) { 99 for (let i = 1; i < this.currentTotal + 1; i++) { 100 this.totalbox.push(i); 101 } 102 this.currentbox = this.totalbox.slice(0, 9); 103 } else { 104 for (let i = 1; i < this.currentTotal + 1; i++) { 105 this.currentbox.push(i); 106 this.totalbox.push(i); 107 } 108 } 109 } 110 } 111 }, 112 created() { 113 if (this.total) { 114 // 向上取整 115 this.currentTotal = Math.ceil(this.total / this.value); 116 this.totalbox = []; 117 this.currentbox = []; 118 if (this.currentTotal > 9) { 119 for (let i = 1; i < this.currentTotal + 1; i++) { 120 this.totalbox.push(i); 121 } 122 this.currentbox = this.totalbox.slice(0, 9); 123 } else { 124 for (let i = 1; i < this.currentTotal + 1; i++) { 125 this.currentbox.push(i); 126 this.totalbox.push(i); 127 } 128 } 129 } 130 }, 131 mounted() {}, 132 beforeDestroy() {}, 133 methods: { 134 checkData() { 135 // 如果選中的頁號大於5，總頁數大於9 136 if (this.currentPage > 5 && this.totalbox.length > 9) { 137 this.currentbox = this.totalbox.slice( 138 this.currentPage - 5, 139 this.currentPage + 4 140 ); 141 } else if (this.currentPage > 5 && this.totalbox.length <= 9) { 142 // 如果選中的頁號大於5，總頁數小於等於9 143 this.currentbox = this.totalbox.slice(0, this.totalbox.length); 144 } else if (this.currentPage <= 5 && this.totalbox.length > 9) { 145 // 如果選中的頁號下於5，總頁數大於等於9 146 this.currentbox = this.totalbox.slice(0, 9); 147 } else if (this.currentPage <= 5 && this.totalbox.length <= 9) { 148 // 如果選中的頁號大於5，總頁數小於等於9 149 this.currentbox = this.totalbox.slice(0, this.totalbox.length); 150 } 151 this.$emit("handleCurrentChange", this.currentPage); 152 }, 153 goOne() { 154 this.number(1); 155 }, 156 number(item) { 157 this.currentPage = item; 158 this.checkData(); 159 }, 160 // 上一頁 161 prev() { 162 if (this.currentPage > 1) { 163 this.currentPage -= 1; 164 } 165 if (this.currentPage === 1) { 166 return; 167 } 168 this.checkData(); 169 }, 170 // 下一頁 171 next() { 172 if (this.currentPage < this.currentTotal) { 173 this.currentPage += 1; 174 } 175 if (this.currentPage === this.totalbox.length) { 176 return; 177 } 178 this.checkData(); 179 }, 180 valueChange() { 181 this.currentTotal = Math.ceil(this.total / this.value); 182 this.totalbox = []; 183 this.currentbox = []; 184 if (this.currentTotal > 9) { 185 for (let i = 1; i < this.currentTotal + 1; i++) { 186 this.totalbox.push(i); 187 } 188 this.currentbox = this.totalbox.slice(0, 9); 189 } else { 190 for (let i = 1; i < this.currentTotal + 1; i++) { 191 this.currentbox.push(i); 192 this.totalbox.push(i); 193 } 194 } 195 this.currentPage = 1; 196 this.$emit("handleSizeChange", this.value); 197 } 198 } 199 }; 200 </script> 201 202 <style scoped lang="scss"> 203 .cur_disable { 204 color: #c0c4cc; 205 cursor: not-allowed; 206 } 207 .bold { 208 font-weight: bold; 209 } 210 .active { 211 color: #409eff; 212 } 213 .jspagination { 214 line-height: 32px; 215 .total { 216 margin-right: 10px; 217 font-weight: 400; 218 color: #606266; 219 } 220 .numbox { 221 margin: 0px 15px; 222 max-width: 274px; 223 overflow: hidden; 224 } 225 .num { 226 display: inline-block; 227 margin: 0px 9px; 228 font-weight: bold; 229 } 230 231 .dqdjy { 232 line-height: 25px; 233 margin-right: 10px; 234 font-weight: 400; 235 color: #606266; 236 } 237 /deep/ .el-select { 238 width: 106px; 239 } 240 } 241 </style>