在SRC下面建目录components/Pagination.vue，代码如下：

<template>
  <el-scrollbar>
    <div :class="{ hidden: hidden }" class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :background="background"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
  const props = defineProps({
    total: {
      required: true,
      type: Number as PropType<number>,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array as PropType<number[]>,
      default() {
        return [10, 20, 30, 50]
      },
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    background: {
      type: Boolean,
      default: true,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  })

  const emit = defineEmits(['pagination', 'update:page', 'update:limit'])

  const currentPage = useVModel(props, 'page', emit)

  const pageSize = useVModel(props, 'limit', emit)

  function handleSizeChange(val: number) {
    emit('pagination', { page: currentPage, limit: val })
  }

  function handleCurrentChange(val: number) {
    currentPage.value = val
    emit('pagination', { page: val, limit: props.limit })
  }
</script>

<style lang="scss" scoped>
  .pagination {
    padding: 12px;

    &.hidden {
      display: none;
    }
  }
</style>

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import Pagination from '@/components/Pagination.vue'; // 引入 Pagination 组件

const app = createApp(App);

// 注册 Element Plus
app.use(ElementPlus);

// 全局注册 Pagination 组件
app.component('Pagination', Pagination);

app.mount('#app');

<pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="queryForm.startIndex"
      v-model:limit="queryForm.pageSize"
      @pagination="fetchData"
    />

• 本文标题： EL-Pagination分页组件封装
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：sqlserver中 表字段中，按A列排序，0的排在最上面，其它的按降序排