vue.js 分页

<template>
  <div class="index">
    <el-pagination
      background
      :hide-on-single-page="true"
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      total: 126,
      currentPage: 1,
      pageSize: 3 // 每页显示的数量
    }
  },
  created: {
  },
  methods: {
    handleCurrentChange (currentPage) {
      // 显示当前页数对应的数据
      console.log('currentPage = ' + currentPage)
    }
  }
}
</script>

<style>

</style>

  

posted @ 2019-07-08 15:51  漫步CODE人生  阅读(289)  评论(0编辑  收藏  举报