vue項目中分頁元件

注意：

1.下面代碼按鈕和下拉框用的是element ui 架構

2. 上一頁下一頁用的是字型圖示

一.

// 父元件
<template>
  <div>
      <Pagination :paginationData="paginationData" @paginationChange="paginationChange"></Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/common/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      paginationData: {
        total: 583,
        page: 1,
        pageSizes: [
		  { value: 1, label: 10 },
		  { value: 2, label: 20 },
		  { value: 3, label: 50 },
		  { value: 4, label: 100 }
		],
        totalPage: 0,
        pageSize:10,
        selectValue: pageSize,
      }
    };
  },
  methods: {
      paginationChange(value) {
      console.log(value);
    }
  }
};

           

子元件

<template>
  <!-- 公用分頁 -->
  <div class="pagination">
    <el-button icon="iconfont icon-pre_all" @click="homePage"></el-button>
    <el-button class="pre" icon="iconfont icon-pre" @click="previousPage"></el-button>
    <div class="total-size">
      &nbsp;
      <span class="current-page">{{paginationData.page}}</span>
      &nbsp;/&nbsp;{{paginationData.totalPage}}&nbsp;
    </div>
    <el-button class="next" icon="iconfont icon-next" @click="nextPage"></el-button>
    <el-button icon="iconfont icon-next_all" @click="tailPage"></el-button>
    <div class="select-page">
      每頁顯示數：
      <el-select v-model="value" placeholder="10">
        <el-option
          v-for="item in paginationData.pageSizes"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </div>
    <div class="total-page">
      共計：
      <span>{{paginationData.total}}</span>&nbsp;條資料
    </div>
  </div>
</template>
           

<script>
export default {
  props: {
    paginationData: Object
  },
  data() {
    return {
      value: ""
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.value = this.paginationData.selectValue;
      this.selectPageSize();
    },
    homePage() {
      //首頁
      this.paginationData.page = 1;
      console.log(this.paginationData.page);
      this.$emit("paginationChange", this.paginationData);
    },
    previousPage() {
      //上一頁
      if (this.paginationData.page == 1) {
        return;
      } else {
        this.paginationData.page--;
        this.$emit("paginationChange", this.paginationData);
      }
    },
    nextPage() {
      //下一頁
      const { page, totalPage } = this.paginationData;
      if (page === totalPage) {
        return;
      } else {
        this.paginationData.page++;
        this.$emit("paginationChange", this.paginationData);
      }
    },
    tailPage() {
      //尾頁
      this.paginationData.page = this.paginationData.totalPage;
      this.$emit("paginationChange", this.paginationData);
    },
    selectPageSize() {
      this.paginationData.totalPage = Math.ceil(
        this.paginationData.total / this.value
      );
    },
  },
  watch: {
    value(value) {
      this.value = value;
      this.paginationData.page = 1;
      this.selectPageSize();
      this.$emit("paginationChange", this.paginationData);
    }
  }
};
</script>
           

<style >
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  background: #fff;
  margin-right: 10px;
  .el-button {
    padding: 6px 12px;
    color: #999999;
    .iconfont {
      font-size: 12px;
    }
    &.next,
    &.pre {
      padding: 6px 11px;
    }
  }
  .total-size {
    color: #999999;
    padding: 6px 12px;
    width: 65px;
    text-align: center;
    .current-page {
      color: #228be9;
    }
  }
  .select-page {
    color: #999999;
    margin-left: 10px;
    .el-select {
      width: 65px;
      .el-input--suffix {
        .el-input__inner {
          padding-left: 10px;
        }
        .el-input__suffix {
          right: 0;
        }
      }
    }
  }
  .total-page {
    color: #999999;
    margin-left: 10px;
    span {
      color: #228be9;
    }
  }
}
</style>
           

效果如下：

二.

<div class="pagination">
      <el-pagination layout=" slot">
        <div class="total-pager">共 {{ total }} 條記錄</div>
      </el-pagination>
      <el-pagination background layout="slot">
        <div
          :class="page == 1 ? 'first-pager disable' : 'first-pager'"
          @click="jumpPage('1')"
        >
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-pagination>
      <el-pagination
        background
        @size-change="handleSizeChange"
        :current-page.sync="page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="prev,pager,next,slot,sizes"
        :total="total"
        :pager-count="5"
      >
        <div
          :class="page == lastPage ? 'last-pager disable' : 'last-pager'"
          @click="jumpPage('0')"
        >
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </el-pagination>
    </div>

computed: {
    lastPage() {
      return Math.ceil(this.total / this.pageSize);
    },
}
//methods
 handleSizeChange(val) {
      //分頁 每頁多少條
      this.pageSize = val;
      this.page = 1;
    },
    jumpPage(value) {
      //分頁 首頁-尾頁
      if (value == 1) {
        this.page = 1;
      } else {
        this.page = this.lastPage;
      }
    },    
           

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 20px;
  .el-pagination {
    display: flex;
    align-items: center;
  }
  .first-pager,
  .last-pager {
    &.disable {
      cursor: not-allowed;
      color: #c0c4cc;
    }
    margin: 0 5px;
    background-color: #e0e0e0;
    color: #333;
    min-width: 30px;
    border-radius: 2px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
  }
  > div:nth-child(2) {
    padding-right: 0;
  }
  > div:last-child {
    padding-left: 0;
  }
  .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .total-pager {
    font-weight: 500;
    font-size: 12px;
    color: #333;
    margin-right: 5px;
  }
  .el-pagination {
    .el-pager li,
    .btn-next,
    .btn-prev {
      color: #333;
      background: #e0e0e0;
    }
  }
}
           

效果如下：

若是寫的不清楚或有問題的地方，還望兄台能指出，謝謝！