封装elementUI的el-pagination组件

最新推荐文章于 2024-08-20 10:13:13 发布

夕阳_醉了

最新推荐文章于 2024-08-20 10:13:13 发布

阅读量67

点赞数 2

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/w807139809/article/details/141323968

版权

直接上代码

// 新建一个 myPagination.vue文件  
<template>
   <div class="pagination">
                <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
    </div>
</template>

<script>
export default {
  data(){
    return{
      pageSize: 10,
      pageNo:1,
    }
  },
  props:{
    count:{
      type: Number || String,
      default: 0
    },
    initData:{
      type: Function
    },
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.initData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.initData();
    },
    setPageNo(pageNo=1){
      this.pageNo = pageNo;
    },
    setPageSize(pageSize=10){
      this.pageSize = pageSize;
    },
    getPageSize(){
      return this.pageSize;
    },
    getPageNo(){
      return this.pageNo;
    }
  },


}
</script>