vue3封装Element分页

配置当前页
配置每页条数
页面改变、每页条数改变都触发回调

封装分页 Pagination.vue

<template>
  <el-pagination
    background
    v-bind="$attrs"
    :page-sizes="pageSizes"
    v-model:current-page="page"
    v-model:page-size="pageSize"
    :total="total"
    :layout="layout"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";

const props = defineProps({
  pageSizes: {
    type: Array,
    default() {
      return [20, 30, 50, 100];
    },
  },
  total: {
    type: Number,
    default: 0,
    required: true,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  currentSize: {
    type: Number,
    default: 20,
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
});

const emit = defineEmits([
  "update:currentPage",
  "update:currentSize",
  "pagination",
]);

const page = computed({
  get() {
    return props.currentPage;
  },
  set(val) {
    emit("update:currentPage", val);
  },
});

const pageSize = computed({
  get() {
    return props.currentSize;
  },
  set(val) {
    emit("update:currentSize", val);
  },
});

const handleSizeChange = () => {
  page.value = 1;
  emit("pagination");
};
const handleCurrentChange = () => {
  emit("pagination");
};

watch(
  () => props.total,
  () => {
    // 翻页组件，删除数据后，当前页码大于总页码，需要回退到总页码
    if (
      props.currentPage > 1 &&
      props.total < (props.currentPage - 1) * props.currentSize + 1
    ) {
      handleChange();
    }
  }
);
const handleChange = () => {
  page.value--;
  $emit("pagination");
};
</script>
<style lang="scss" scoped></style>

调用组件示例

<template>
  <Pagination
    :total="total"
    v-model:currentPage="queryParams.currentPage"
    v-model:currentSize="queryParams.currentSize"
    @pagination="handleGetTableData"
  />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const total = ref(100);
const queryParams = ref({
  currentPage: 2,
  currentSize: 30,
});
const handleGetTableData = () => {
  ElMessage.success(
    `当前页：${queryParams.value.currentPage}，每页条数：${queryParams.value.currentSize}`
  );
  console.log(queryParams.value);
};
</script>
<style lang="scss" scoped></style>