Pagination 分页实现跳转首页和尾页

最新推荐文章于 2024-05-27 15:03:45 发布

木蓝茶陌*_*

最新推荐文章于 2024-05-27 15:03:45 发布

阅读量2.3k

点赞数 1

分类专栏： element 文章标签： Pagination分页跳转首页跳转尾页分页跳转 Element分页组件

本文链接：https://blog.csdn.net/jyn15159/article/details/126846114

版权

element 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用slot插槽添加首页和尾页按钮：

<div class="paginationCustomize" v-if="tableData.length > 0">
    <el-pagination
                   :page-sizes="pageSizes"
                   :page-size="tablePage.pageSize"
                   :current-page="tablePage.pageNo"
                   layout="total, sizes, slot,prev, pager, next"
                   :total="tablePage.tableTotal"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   >
        <el-tooltip content="跳转至首页" placement="top">
            <button class="firstPage" :disabled="tablePage.firstPageDisabled" @click="toFirstPage">
                <i class="el-icon-d-arrow-left"></i>
            </button>
        </el-tooltip>
    </el-pagination>
    <el-pagination
                   :page-sizes="pageSizes"
                   :page-size="tablePage.pageSize"
                   :current-page="tablePage.pageNo"
                   layout="slot, jumper"
                   :total="tablePage.tableTotal"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   >
        <el-tooltip content="跳转至尾页" placement="top">
            <button class="lastPage" :disabled="tablePage.lastPageDisabled" @click="toLastPage">
                <i class="el-icon-d-arrow-right"></i>
            </button>
        </el-tooltip>
    </el-pagination>
</div>

添加首页和尾页按钮：

data(){
    return {
        tablePage: {
        pageNo: 1, //  当前页
        pageSize: 10, //  展示数量
        tableTotal: 0, //  总数
        firstPageDisabled: true, //  首页
        lastPageDisabled: true //  末页
      },
      pageSizes: [10, 20, 50, 100],
    }
}

监听首页和尾页按钮是否禁用：

watch: {
    // 分页 计算首页和尾页
    tablePage: {
      handler (newVal) {
        const pages = Math.ceil(newVal.tableTotal / newVal.pageSize);
        if (pages === 0) {
          // 数据(totalResult)为0
          this.tablePage.firstPageDisabled = true; // 首页按钮是否禁用
          this.tablePage.lastPageDisabled = true; // 尾页按钮是否禁用
        } else {
          this.tablePage.firstPageDisabled = newVal.pageNo === 1;
          this.tablePage.lastPageDisabled = newVal.pageNo === pages;
        }
      },
      deep: true
    }
  }

跳转首页和尾页：

// 前往首页
toFirstPage () {
    this.handleCurrentChange(1);
},
    
// 前往尾页
toLastPage () {
     const max = Math.ceil(this.tablePage.tableTotal / this.tablePage.pageSize);
     this.handleCurrentChange(max);
},

// 分页条数变化
 handleSizeChange (psize) {
     this.tablePage.pageSize = psize;
 },
     
// 改变当前页码
handleCurrentChange (currentPage) {
     this.tablePage.pageNo = currentPage;
     this.getData();
}