[JavaScript知识库]elementui+vue，封装分页器并对数据进行分页

1、pagination组件

<template>
	 <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageN.currentPage"
      :page-sizes="pageN.pageSizes"
      :page-size="pageN.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageLength"  
     >
    </el-pagination>
  </div>
</template>


 props:{
pageLength:{
  default:0
},
pageN:{
  default:{}
}
 },
	methods: {//向父组件传值
      handleSizeChange(val) {
        this.$emit("sizeChange",val);
      },
      handleCurrentChange(val) {
        this.$emit("jumpPage",val);
      }
    },

2、父组件

<list :post1="posts"></list>  //需要进行分页的list
    <pagination
      class="pagination"
      :pageN="pageN"
      :pageLength="post.length"
      @jumpPage="jump"
      @sizeChange="sizeChange"
    ></pagination>

  data() {
    return {
      pageN: {
        currentPage: 1,
        pageSizes: [2, 3, 5, 10],
        pageSize: 10,
      },
      post:[]//已经获取到数据
     }
    },
        computed: {
    posts() {    //注意这个，将list和分页器连接起来的关键
      return this.post.slice(
        this.pageN.pageSize * (this.pageN.currentPage - 1),
        this.pageN.pageSize * this.pageN.currentPage
      );
    },
  },
    methods: {   //修改每页最大数和当前页
    sizeChange(val) {
      this.pageN.pageSize = val;
      this.pageN.currentPage = 1;
    },
    jump(val) {
      this.pageN.currentPage = val;
      console.log(val);
    },
  },