Element-ui组件--pagination分页的使用

Posted ~逍遥★星辰~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-ui组件--pagination分页的使用相关的知识,希望对你有一定的参考价值。

  一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结:
<template>  <div class="block">   
<el-pagination
      @size-change="handleSizeChange" // pageSize改变时会触发
      @current-change="handleCurrentChange"  // currentPage改变时会触发
      :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>

  另外也发现了一篇比较好的博客,可参考:https://blog.csdn.net/zhumengzj/article/details/78194044?locationNum=6&fps=1

其实也没有什么好的内容,只是今天在做项目时遇到了,并且学习了这个组件,相当于在此做个笔记吧!

 

以上是关于Element-ui组件--pagination分页的使用的主要内容,如果未能解决你的问题,请参考以下文章

基于element-ui实现的同步分页

Element-UI的Pagination分页sync问题总结

vue+Element-ui实现分页效果

vue+element-UI实现分页效果

element-ui中table组件-高度做适配

git--------------vue+element-ui实现分页效果-------------劉