element-plus分页组件el-pagination的使用

分页组件是非常常用的组件之一和表格组件一般成对出现，element-plus 分页组件的组件名是el-pagination

1.组件主要属性如下

属性名	作用	值类型	枚举值	默认值
v-mode:page-size	每页条目	数字		10
v-mode:current-page	当前页码	数字		10
default-current-page	默认当前页码	数字		1
default-page-size	默认每页条目	数字		10
total	总条目数，tpotal和page-count选其一，	数字		10
page-sizes	每页条目选择列表	数字数组
layout	组件布局 ，上下翻页，跳页等布局设置 ，多项逗号分割	字符串	sizes,prev,next,jumper,pager,>

要监听当前页和条目的改变，建议使用watch,不建议使用原有的事件

2.用法示例

<script setup lang="ts">
import { onMounted, reactive, ref,watch } from 'vue'
    const pageSizes=ref([10,20,50,100]);

    const currentPageSize =ref(10)
    const currentPage =ref(1)


    watch(currentPage,(newPage,oldPage)=> {
        console.log(newPage,oldPage)
    })

</script>

    
<template>
    
    <div>
      <el-pagination :page-sizes="pageSizes" v-model:page-size="currentPageSize"  v-model:current-page="currentPage"  layout="sizes,prev,next,jumper,pager,>" :total="200"></el-pagination>
    </div>
    

      
</template>

<style scoped>
  
</style>

https://element-plus.org/zh-CN/component/pagination.html