vue开发 使用element的el-pagination分页组件

一、代码实现

实现思路：获取到列表的所有数据，然后对数据进行处理，紧接着操作分页。
特别注意的是：必须要求后端返回一个数据的总条数total ！！！

<template>
  <div class="home">
  
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    
  </div>
</template>

<script>
	data() {
	    currentPage: 1, //当前页
	    total: 0, //总条数
	    list: [], //当前页码的数据
	    pageSize: 10, //当前页容量
	    pageSizes: [10, 20, 30, 40, 50],
	}
	
	methods: {
	    //切换每页条数容量
	    handleSizeChange(val) {       
	      this.currentPage = 1;
	      this.pageSize = val;
	      this.getList();
	    },
	    //切换当前页
	    handleCurrentChange(val) {    
	      this.currentPage = val;
	      this.getList();
	    },
	    //获取列表数据
	    getList() {   
	      getList().then((res) => {
	        this.total = res.data.data.length;      //总条数
	        this.list= res.data.data;
	      });
	    },
	 }
</script>

完成~