前端vue2渲染 使用 Element-UI 的分页组件不结合 `el-table`实现！

<template>
  <div>
    <div v-for="product in displayedProducts" :key="product.id">
      <!-- 渲染单个商品的模板 -->
      <div>{{ product.name }} - {{ product.price }}</div>
    </div>

    <el-pagination
      background
      layout="prev, pager, next, jumper"
      :total="totalProducts"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [], // 商品列表数据，假设这是从 API 获取的
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数量
    };
  },
  computed: {
    totalProducts() {
      return this.products.length;
    },
    displayedProducts() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.products.slice(startIndex, endIndex);
    },
  },
  methods: {
    handlePageChange(val) {
      // 当前页码改变时的处理函数
      this.currentPage = val;
      // 这里可以添加额外的逻辑，比如重新请求数据
    },
    handleSizeChange(val) {
      // 每页显示数量改变时的处理函数
      this.pageSize = val;
      // 可能需要重新计算当前页码以保持显示连续性
      this.currentPage = Math.ceil(this.totalProducts / this.pageSize);
    },
  },
  created() {
    // 这里模拟从服务器获取数据，实际应用中可能是异步请求
    this.products = Array.from({ length: 100 }, (_, i) => ({
      id: i + 1,
      name: `Product ${i + 1}`,
      price: `$${(i + 1) * 10}`,
    }));
  },
};
</script>