Element-ui组件--pagination分页

一般写后台系统都会有很多的列表，有列表就相应的要用到分页，根据项目中写的几个分页写一下我对分页的理解，就当是学习笔记了。

这是Element-ui提供的完整的例子

<template>  <div class="block">   
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"//这事下拉框可以选择的，选择一夜显示几条数据
      :page-size="100"  //这是当前煤业显示的条数
      layout="total, sizes, prev, pager, next, jumper"
      :total="400" //这个是总共有多少条数据，把后台获取到的数据总数复制给total就可以了
>
    </el-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        total:'0',
        currentPage: 4
      };
    }
  }
</script>

以下是我自己在项目中用到的分页

<div style="float:right;margin-top:20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"      //写代码时忘记把pageSize赋值给:page-size了，

 　　　　　　layout="total, sizes, prev, pager, next, jumper" 
　　　　　　:total="totalCount"> 
　　　　</el-pagination>
</div>

没什么好的内容，就是给自己做个学习笔记吧

转载于:https://www.cnblogs.com/qing619/p/7797664.html