vue中element分页器案例

以下是一个基于Element UI的分页器案例：

<template>
  <div>
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 100, // 总共的数据量
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页显示的数据量
    };
  },
  methods: {
    // 分页器页码改变时的回调函数
    handleCurrentChange(page) {
      console.log(`当前页码: ${page}`);
      // TODO: 根据页码获取对应的数据并渲染页面
    },
  },
};
</script>

在这个案例中，我们使用了`el-pagination`组件来实现分页器。其中，`total`表示总共的数据量，`currentPage`表示当前页数，`pageSize`表示每页显示的数据量。在`el-pagination`组件中，我们设置了`layout`属性为`prev, pager, next`，表示分页器的显示方式。当分页器页码改变时，会触发`handleCurrentChange`方法，在该方法中可以根据页码获取对应的数据并渲染页面。