基于vue3和elementPlus的分页组件封装

CommonPagination.vue组件

<template>
<div class="pagination-container">
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 50]"
    :total="total"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
</template>
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
total: {
  type: Number,
  required: true
},
// 初始页码
page: {
  type: Number,
  default: 1
},
// 初始每页条数
limit: {
  type: Number,
  default: 10
}
})

const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
const currentPage = ref(props.page)
const pageSize = ref(props.limit)
// 监听父组件传入的页码和每页条数变化
watch(() => props.page, (newVal) => {
currentPage.value = newVal
})

watch(() => props.limit, (newVal) => {
pageSize.value = newVal
})

// 每页条数改变
const handleSizeChange = (val) => {
emit('update:limit', val)
emit('pagination', { page: currentPage.value, limit: val })
}

// 页码改变
const handleCurrentChange = (val) => {
emit('update:page', val)
emit('pagination', { page: val, limit: pageSize.value })
}
</script>
<style scoped>
.pagination-container {
padding: 15px 0;
display: flex;
justify-content: flex-end;
}
</style> 

父组件调用 father.vue

<template>
<CommonPagination
      v-model:page="queryParams.page"
      v-model:limit="queryParams.limit"
      :total="total"
      @pagination="getList"
    />
</template>
<script setup>
import { ref, reactive } from 'vue'
import CommonPagination from './CommonPagination.vue'
const queryParams = reactive({
page: 1, //当前页
limit: 10, //默认条数1页10条
// 其他查询参数...
})
const total = ref(0) //总条数

//请求方法getList
const getList = async ({ page, limit } = queryParams) => {
try {
  //1、调接口将分页的参数传进去（有其它参数后面加）
  const res = await API
  //2、获取到的数据总页数赋值给total，获取到的data数据赋值给列表变量即可
} catch (error) {
  console.error(error)
  ElMessage.error('获取数据失败')
} 
}
</script>