vue3+js基于el-pagination二次封装分页组件

初入行的小白

已于 2024-02-02 11:00:45 修改

阅读量240

点赞数 2

文章标签： javascript vue.js elementui

于 2024-02-02 10:54:49 首次发布

本文链接：https://blog.csdn.net/Huangbaihao/article/details/135988793

版权

本文介绍了如何在Vue项目中创建一个名为pagination.vue的分页组件，包括模板结构、计算属性、事件处理以及如何将其全局注册并在父组件中使用。

摘要由CSDN通过智能技术生成

在components文件夹新建一个pagination.vue

<template>
  <div class="">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      small
      background
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { computed } from 'vue'
const emit = defineEmits([
  'update:page_no',
  'update:page_size',
  'update:getData',
])
const props = defineProps({
  //页码
  page_no: {
    type: Number,
    default: 1,
  },
  //每页条数
  page_size: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50],
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
})
const currentPage = computed({
  get: () => {
    return props.page_no
  },
  set: (val) => {
    emit('update:page_no', val)
  },
})
const pageSize = computed({
  get: () => {
    return props.page_size
  },
  set: (val) => {
    emit('update:page_size', val)
  },
})
//每页条数
const handleSizeChange = (val) => {
  emit('update:getData', { page_no: currentPage.value, page_size: val })
}
//页码
const handleCurrentChange = (val) => {
  emit('update:getData', { page_no: val, page_size: pageSize.value })
}
</script>
<style lang="scss" scoped></style>

将pagination.vue全局注册在main.js中

//全局分页组件
import Pagination from '@/components/pagination.vue'
const app = createApp(App);
app.component('Pagination', Pagination)

全局注册后直接在父组件上使用

 <Pagination
     v-model:page_no="params.page_no"
     v-model:page_size="params.page_size"
     @update:getData="getData"
     :pageSizes="[10, 20, 30, 50]"
     :total="total"
      >
</Pagination>

<script setup>
    const params = reactive({
       //页码
      page_no: 1,
        //每页条数
      page_size: 10,
    })
    //总条数
    const total = ref(0)
    function getData (){
        //后续逻辑......
    }
</script>