<template>
? <div class="pagination">
? ? <!-- 總頁數(shù) -->
? ? <div class="total">共{{ total }}條</div>
? ? <!-- 選擇每頁的條數(shù) -->
? ? <select name="" id="size_select" v-model="sizes" @change="sizeChange">
? ? ? <option v-for="item in pageSizes" :key="item" :value="item">
? ? ? ? {{ item }}條/頁
? ? ? </option>
? ? </select>
? ? <div class="pagenum">
? ? ? <!-- 上一頁 -->
? ? ? <el-button
? ? ? ? icon="el-icon-arrow-left"
? ? ? ? :disabled="backDisabled"
? ? ? ? circle
? ? ? ? @click="back"
? ? ? ></el-button>
? ? ? <!-- 頁碼 -->
? ? ? <ul>
? ? ? ? <li
? ? ? ? ? :class="currentPage == item ? 'active' : ''"
? ? ? ? ? v-for="(item, index) in pagenum"
? ? ? ? ? :key="index"
? ? ? ? ? @click="toPage(item)"
? ? ? ? >
? ? ? ? ? {{ item }}
? ? ? ? </li>
? ? ? </ul>
? ? ? <!-- 下一頁 -->
? ? ? <el-button
? ? ? ? icon="el-icon-arrow-right"
? ? ? ? :disabled="forwardDisabled"
? ? ? ? circle
? ? ? ? @click="forward"
? ? ? ></el-button>
? ? </div>
? </div>
</template>
?
<script>
export default {
? name: "pagination",
? props: {
? ? total: { ?// 總數(shù)
? ? ? type: null,
? ? ? required: true,
? ? },
? ? pageSizes: { // 可選擇的每頁條數(shù)
? ? ? type: Array,
? ? },
? ? pageSize: { ?// 每頁顯示的條數(shù)
? ? ? type: Number,
? ? ? required: true,
? ? },
? ? currentPage: { // 當(dāng)前頁
? ? ? type: Number,
? ? ? required: true,
? ? },
? },
? data() {
? ? return {
? ? ? sizes: this.pageSize, ?// 接收props傳來的pageSize
? ? ? nowPage: this.currentPage, ?// 接收props傳來的currentPage
? ? };
? },
? computed: {
? ? allPage() { ?// 計算所有的頁數(shù)
? ? ? return Math.ceil(this.total / this.pageSize);
? ? },
? ? backDisabled() { ?// 是否禁用上一頁
? ? ? return this.currentPage == 1;
? ? },
? ? forwardDisabled() { // 是否禁用下一頁
? ? ? return this.currentPage == this.allPage;
? ? },
? ? pagenum() { ? // 計算顯示不同的頁
? ? ? if (this.allPage - this.nowPage > 6) { ?// ?
? ? ? ? if (this.nowPage > 6) {
? ? ? ? ? return [
? ? ? ? ? ? 1,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.nowPage - 2,
? ? ? ? ? ? this.nowPage - 1,
? ? ? ? ? ? this.nowPage,
? ? ? ? ? ? this.nowPage + 1,
? ? ? ? ? ? this.nowPage + 2,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.allPage,
? ? ? ? ? ];
? ? ? ? } else {
? ? ? ? ? if (this.allPage > 8) {
? ? ? ? ? ? return [1, 2, 3, 4, 5, 6, "...", this.allPage];
? ? ? ? ? } else {
? ? ? ? ? ? return this.allPage;
? ? ? ? ? }
? ? ? ? }
? ? ? } else {
? ? ? ? if (this.nowPage < 6) {
? ? ? ? ? return this.allPage;
? ? ? ? } else {
? ? ? ? ? return [
? ? ? ? ? ? 1,
? ? ? ? ? ? "...",
? ? ? ? ? ? this.allPage - 5,
? ? ? ? ? ? this.allPage - 4,
? ? ? ? ? ? this.allPage - 3,
? ? ? ? ? ? this.allPage - 2,
? ? ? ? ? ? this.allPage - 1,
? ? ? ? ? ? this.allPage,
? ? ? ? ? ];
? ? ? ? }
? ? ? }
? ? },
? },
? methods: {
? ? sizeChange() { ?// 每頁限制條數(shù)改變觸發(fā)事件
? ? ? this.$emit("sizeChange", this.sizes);
? ? },
? ? forward() { ?// 點擊下一頁
? ? ? this.$emit("currentChange", (this.nowPage += 1));
? ? },
? ? back() { ?// 點擊上一頁
? ? ? this.$emit("currentChange", (this.nowPage -= 1));
? ? },
? ? toPage(val) { ?// 點擊頁數(shù)
? ? ? if (val == "...") {
? ? ? ? console.log(2);
? ? ? } else {
? ? ? ? this.nowPage = val;
? ? ? ? this.$emit("currentChange", val);
? ? ? }
? ? },
? },
};
</script>