vue2手写一个样式跟el-pagenation一样的分页器

可以使用 Vue 2 来手写一个样式与 `el-pagination` 类似的分页器。以下是一个简单的示例：

首先，在你的 Vue 组件中引入分页器组件的样式，例如：

<style>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination-item {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.pagination-item.active {
  background-color: #ccc;
}
</style>

然后，在模板中使用以下代码来渲染分页器：

<template>
  <div class="pagination">
    <div
      v-for="page in totalPages"
      :key="page"
      :class="['pagination-item', { active: page === currentPage }]"
      @click="changePage(page)"
    >
      {{ page }}
    </div>
  </div>
</template>

接下来，在 Vue 组件的 `data` 属性中定义当前页码和总页数：

data() {
  return {
    currentPage: 1,
    totalPages: 10 // 假设总页数为 10
  };
},

最后，在 Vue 组件的 `methods` 中添加方法来处理页码的切换：

methods: {
  changePage(page) {
    // 处理页码切换逻辑，例如发送请求获取对应页的数据
    this.currentPage = page;
    // 其他逻辑...
  }
}

这样就完成了一个简单的手写分页器，样式与 `el-pagination` 类似。你可以根据自己的需求进一步调整样式和逻辑。