赞
踩
- <template>
- <div class="pagination">
- <div
- class="pageWord firstPage"
- v-if="currentPage !== 1"
- @click="toFirstPage()"
- >
- 首页
- </div>
- <div class="left-arrow" v-if="currentPage !== 1" @click="prevPage()">
- <i class="el-icon-arrow-left" style="color: #1890ff; font-size: 24px"></i>
- </div>
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page.sync="currentPage"
- :page-size="pageSize"
- layout=" pager"
- :total="total"
- >
- </el-pagination>
- <div
- class="right-arrow"
- @click="nextPage()"
- v-if="currentPage !== Math.ceil(total / pageSize)"
- >
- <i class="el-icon-arrow-right" style="color: #1890ff; font-size: 24px"></i>
- </div>
- <div
- class="pageWord lastPage"
- v-if="currentPage !== Math.ceil(total / pageSize)"
- @click="toLastPage()"
- >
- 尾页
- </div>
- </div>
- </template>
-
-
- <script>
- export default {
- data() {
- return {
- currentPage: 1,
- pageSize: 10,
- total: 100
- }
- },
- methods: {
- // 跳转到首页
- toFirstPage() {
- this.currentPage = 1
- },
- // 跳转到尾页
- toLastPage() {
- this.currentPage = Math.ceil(this.total / this.pageSize)
- },
- // 左切换
- prevPage() {
- if (this.currentPage === 1) {
- return
- } else {
- this.currentPage--
- }
- },
- // 右切换
- nextPage() {
- if (this.currentPage === Math.ceil(this.total / this.pageSize)) {
- return
- } else {
- this.currentPage++
- }
- },
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`)
- },
- handleCurrentChange(val) {
- console.log(`当前页: ${val}`)
- }
- }
- }
- </script>
-
-
- <style lang="scss" scoped>
- .pagination {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- position: relative;
- left: -10px;
- transform: all 0.4s;
- .pageWord {
- font-size: 22px;
- font-weight: 400;
- color: #1890ff;
- cursor: pointer;
- }
- .firstPage {
- margin-right: 10px;
- }
- .lastPage {
- margin-left: 10px;
- }
- .left-arrow {
- margin-right: 20px;
- }
- .right-arrow {
- margin-left: 20px;
- }
- .left-arrow,
- .right-arrow {
- cursor: pointer;
- }
- /deep/ .el-pagination {
- .el-pager li:hover {
- color: #1890ff;
- }
- .el-pager {
- .number {
- color: #858585;
- font-size: 22px;
- cursor: pointer;
- transition: all 0.4s;
- margin-left: 17px;
- }
-
- .number.active {
- font-size: 30px;
- color: #1890ff;
- }
- .number.active::after {
- content: '/';
- }
- .el-icon-more {
- margin-left: 20px;
- }
- }
- }
- }
- </style>
-
-
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。