el-pagination纯前端分页代码

以下是使用 ElementUI 中的 el-pagination 实现的纯前端分页代码：

<template>
  <div>
    <!-- 显示当前页数据 -->
    <ul>
      <li v-for="item in currentPageData">{{ item }}</li>
    </ul>
    <!-- 分页器 -->
    <el-pagination
      v-show="total > pageSize"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 总数据量
      total: 50,
      // 每页显示的条数
      pageSize: 10,
      // 当前页数
      currentPage: 1,
      // 当前页的数据
      currentPageData: []
    };
  },
  computed: {
    // 计算总页数
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    // 处理页数改变事件
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getCurrentPageData();
    },
    // 获取当前页的数据
    getCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.allData.slice(start, end);
    }
  },
  mounted() {
    // 所有数据
    this.allData = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20', '数据21', '数据22', '数据23', '数据24', '数据25', '数据26', '数据27', '数据28', '数据29', '数据30', '数据31', '数据32', '数据33', '数据34', '数据35', '数据36', '数据37', '数据38', '数据39', '数据40', '数据41', '数据42', '数据43', '数据44', '数据45', '数据46', '数据47', '数据48', '数据49', '数据50'];

    // 初始化当前页的数据
    this.getCurrentPageData();
  }
};
</script>

在这段代码中，我们使用了 ElementUI 中的 el-pagination 组件来实现分页器的功能。在模板中，我们使用 v-for 指令来循环显示当前页的数据，并使用 el-pagination 组件来显示分页器。在脚本中，我们定义了一些数据和方法来实现分页的逻辑，其中 getCurrentPageData 方法用于获取当前页的数据。在 mounted 钩子函数中，我们初始化了所有数据，并将当前页的数据设置为第一页的数据。