分页-el-pagination

 

目录

1.基本使用

2.使用分页架子

3.分页事件

---

当数据量过多时，使用分页分解数据。

1.基本使用

定义数据体

const params = ref({
  pagenum: 1, //当前页数
  pagesize: 5, //一页几条
  cate_id: '',
  state: ''
})

2.使用分页架子

    模板参数:

• v-model:current-page:绑定当前页数
• v-model:page-size：绑定页码(一页显示几条)
• :page-sizes：设置页码
• layout：布局
• background：背景颜色
• total：绑定总条数
• @size-change：页数改变事件 回调参数value：页数
• @current-change：页码改变事件 回调参数value：页码

 <!-- 分页架子 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[2, 3, 4, 5, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background="true"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

3.分页事件

// 页数变化事件
const onSizeChange = (size) => {
  params.value.pagenum = 1 //默认第一页
  params.value.pagesize = size
    //重新渲染列表数据
  getarticlesClass()
}
// 页码变化事件
const onCurrentChange = (page) => {
  console.log(`页码变化了， ${page}`)
  params.value.pagenum = page
     //重新渲染列表数据
  getarticlesClass()
}