vue封装分页组件，简单易用，满足你的各种需求！

<!-- app.vue -->
<template>
  <div id="app">
    <h1>封装分页组件</h1>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import Pagination from "./Pagination.vue";

export default {
  components: { Pagination },
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(100);

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
    };

    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
    };
  },
};
</script>

<!-- Pagination.vue -->
<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  >
    <template #prev>
      <el-button @click="prev" type="text">上一页</el-button>
    </template>
    <template #next>
      <el-button @click="next" type="text">下一页</el-button>
    </template>
  </el-pagination>
</template>

<script>
import { ref } from "vue";

export default {
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 100,
    },
  },
  emits: ["current-change", "size-change"],
  setup(props, { emit }) {
    const currentPage = ref(props.currentPage);
    const pageSize = ref(props.pageSize);
    const total = ref(props.total);

    const handleCurrentChange = (val) => {
      currentPage.value = val;
      emit("current-change", val);
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
      emit("size-change", val);
    };

    const prev = () => {
      currentPage.value--;
      emit("current-change", currentPage.value);
    };

    const next = () => {
      currentPage.value++;
      emit("current-change", currentPage.value);
    };

    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
      prev,
      next,
    };
  },
};
</script>

<!-- main.js -->
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

1、引入import Pagination

import Pagination from "./Pagination.vue";

2、在App.vue中使用Pagination

<template>
  <div id="app">
    <h1>封装分页组件</h1>
    <Pagination />
  </div>
</template>

<script>
import Pagination from "./Pagination.vue";

export default {
  components: { Pagination },
  setup() {
    return {};
  },
};
</script>

3、在Pagination.vue中实现

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script>
import { ref } from "vue";

export default {
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 100,
    },
  },
  emits: ["current-change", "size-change"],
  setup(props, { emit }) {
    const currentPage = ref(props.currentPage);
    const pageSize = ref(props.pageSize);
    const total = ref(props.total);

    const handleCurrentChange = (val) => {
      currentPage.value = val;
      emit("current-change", val);
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
      emit("size-change", val);
    };

    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
    };
  },
};
</script>

4、在main.js中使用App.vue

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

5、效果演示

总结

本文介绍了如何使用vue和elementui封装一个分页组件，该组件具有滚动到表头、切换页面时滚动到表头等功能，满足各种需求。希望对大家有所帮助！