el-pagenation实现只显示1和左右翻页

el-pagination是Element UI库中的分页组件，它通常用于展示数据列表并提供用户跳转到其他页面的功能。如果你只想让用户能够浏览第一页以及上一页和下一页，而不是显示完整的页码范围，可以设置它的`total`属性来限制总页数，并自定义翻页策略。

下面是一个简化版的配置示例：

<template>
  <el-pagination
    :total="totalItems" // 总数据量
    layout="prev pager next" // 显示布局，仅保留左右箭头和当前页
    @current-change="setCurrentPage" // 当前页改变事件处理器
    current-page="currentPage" // 当前页数
    @size-change="onPageSizeChange" // 分页大小变化事件处理器
    :page-size="pageSize" // 每页显示的数量，默认10
  />
</template>

<script>
export default {
  data() {
    return {
      totalItems: 15, // 这里假设有15条数据
      currentPage: 1, // 初始显示第一页
      pageSize: 10,
    };
  },
  methods: {
    setCurrentPage(page) {
      if (page <= 1 || page > this.totalPages) { // 如果不在有效范围内，则限制为1或最后一页
        this.currentPage = Math.min(this.totalPages, 1);
      } else {
        this.currentPage = page;
      }
    },
    onPageSizeChange(size) {
      // 自定义处理分页大小变更，如果用户试图切换到大于1的页数，直接设回1
      this.pageSize = size === 1 ? 1 : size;
      this.setCurrentPage(1); // 重置当前页为第一页
    },
  },
};
</script>

在这个例子中，当用户点击页码时，会先检查是否越界，如果是则自动调整至第一页。同时，只有在用户改变了每页显示的数据量（如从默认的10变为其他值）时，才允许他们看到下一页，否则始终保持在第一页。