vue3分页器el-pagination使用

最新推荐文章于 2025-02-24 17:25:03 发布

原创最新推荐文章于 2025-02-24 17:25:03 发布 · 573 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3 专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何在Vue应用中使用API接口获取数据，并实现分页功能，包括参数管理、搜索、重置以及每页条数和页码的变化控制。

<script setup lang="ts">
import {ref} from 'vue'
import { getManageList } from '@/api/articl.js'

const params = ref({
  pagesize:4,//每页条数
  pagenum:1,//当前页
  cate_id:'',
  state:''
})
const loading = ref(false)
const tableData = ref([])
const total = ref(0) //总条数
//初始列表
const getTableList = async ()=>{
  loading.value = true
  const res = await getManageList(params.value)
  tableData.value = res.data.data
  total.value = res.data.total
  loading.value = false

}
getTableList()
//搜索
const onSearch = ()=>{
  params.value.pagenum=1
  getTableList()
}
// 重置
const onReset = ()=>{
  params.value.pagenum=1
  params.value.state=''
  params.value.cate_id=''
  getTableList()
}
//每页条数变化
const handleSizeChange = (size)=>{
  params.value.pagesize = size
  params.value.pagenum = 1
  getTableList()
}
//当前页码变化
const handleCurrentChange = (page)=>{
  params.value.pagenum = page
  getTableList()
}
</script>

<template>

// 分页：current-page当前页、page-size每页条数、page-sizes每页可供选择的条数
// background背景颜色、small小尺寸、total总条数
  <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[1, 2, 4, 6]"
      :small="true"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</pageContainer>
</template>