使用Vue 3和Element Plus的分页组件功能

<template>
  <div>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, sizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <div class="content">
      <div v-for="item in displayedItems" :key="item.id">
        <!-- 显示分页内容 -->
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElPagination } from 'element-plus';

export default {
  name: 'Pagination',
  components: { ElPagination },
  props: {
    items: {
      type: Array,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  setup(props) {
    const currentPage = ref(1);

    const pageCount = computed(() => Math.ceil(props.items.length / props.pageSize));

    const total = computed(() => props.items.length);

    const displayedItems = computed(() => {
      const start = (currentPage.value - 1) * props.pageSize;
      const end = start + props.pageSize;
      return props.items.slice(start, end);
    });

    function handleCurrentChange(currentPage) {
      currentPage.value = currentPage;
    }

    function handleSizeChange(pageSize) {
      props.pageSize = pageSize;
    }

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

这个组件使用了Element Plus的分页组件，它提供了一个很好的默认样式和交互。组件内部使用Vue 3的Composition API来计算要显示的页面数、总项数和当前页要显示的项。它还包括两个事件处理程序函数，一个处理当前页码的变化，另一个处理每页要显示的项数的变化。这个组件需要传递一个名为"items"的数组和一个名为"pageSize"的数字作为props。