简单分页的封装

最新推荐文章于 2023-11-03 14:56:17 发布

郭靖8

最新推荐文章于 2023-11-03 14:56:17 发布

阅读量153

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_69892545/article/details/128364331

版权

本文介绍了如何在Vue应用中使用el-pagination组件，实现每页显示数量的动态调整和当前页码变化时的changepage函数触发。通过实例展示了如何监听size-change和current-change事件，以便在主页面控制分页请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div style="text-align:center;margin-top: 10px;">
<!-- 
:page-size="5"  每页显示的条数
total         总条数
size-change  pageSize 改变时会触发
current-change	currentPage 改变时会触发
current-page  当前页数，支持 .sync 修饰符

 -->

    <div class="block">
    <!-- <span class="demonstration">直接前往</span> -->
    <el-pagination
    background
      @size-change="handleSiChange"
      @current-change="handleCurrentChange"
   
      :page-size="pageSize"  
      layout="total, prev, pager, next, jumper"
      :total='total'>
    </el-pagination>
  </div>

  </div>
</template>
<script>

export default {
  name: 'APP',
  props:{
    total:{
        type:Number,
        default:100

    },
    pageSize:{
            type:Number,
            default:10
        }
  },
  data() {
      return {
     
    
     
     
      }
    },
  methods: {
    handleSiChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
      
        this.$emit('changepage', val)
   console.log(this.total);
   


      }
    },
  
 
  created () {
  },
  mounted () {
  },
}
</script>
<style lang="less" scoped>
body{
    overflow: hidden;
}

</style>

主要当点击分页时，触发changepage函数，val为当前页码，在主页面函数中，发起页面分页请求，val 作为分页参数。