el-pagination分页只展示当前页以及前后两页，不展示最后一页，不允许直接点击最后一页，要想到最后一页只能逐个或者五个点击到最后，防止因数据太多造成查询失败问题。

灵感：

        有一个需求，数据太多，分页几百页时，直接点击最后一页，会导致后端查询卡死问题。所以前端隐藏最后一页以及第一页，不允许跨很多页面查询。

具体代码解释：

        我这边做的是分页大于等于10条就使用不显示省略号之后或者之前的页码按钮。具体可以根据自己需求做。如果想省略号页不显示，直接把下面注释的样式放开就好。其他展示内容（条数什么的，参考elementUi分页具体布局配置）。

原始样式：

实现效果：

具体代码：

<template>        
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="searchForm.total">
    </el-pagination>
</template>
<script>
import {getMateList, getQueryPageNoLogin} from "@/api/dashboard/index.js";
import {getToken} from "@/utils/auth";
import {getSetting} from "@/api/login";

export default {
  data() {
    return {
      searchForm:{
        page:1,
        pageSize: 5,
        total: 0,
      },
      pagesStyle: "pagination-container0"
    }
  },
  mounted() {
    this.searchData()
  },
  methods:{
    searchData(){
      getQueryPageNoLogin(this.searchForm).then(res=>{
        let  data   =  res.data
        if(data.code  === 200) {
          this.searchForm.total  = data.data.totalCount
          this.pages()
        }
      })
    },
    //分页
    handleSizeChange(e){
      this.searchForm.pageSize  = e
      this.searchData()
    },
    handleCurrentChange(e){
      this.searchForm.page = e
      this.searchData()
    },
    pages() {
        const totalPages = Math.ceil(this.searchForm.total / this.searchForm.pageSize);
        const currentPage = this.searchForm.page;
        if (totalPages < 10) {
          this.pagesStyle = "pagination-container0"
        } else {
          if (currentPage <= 4 ) {
            this.pagesStyle = "pagination-container1"
          } else if (currentPage > 4 && currentPage <= totalPages - 4) {
            this.pagesStyle = "pagination-container2"
          } else {
            this.pagesStyle = "pagination-container3"
          }
        }
    },
  }
}
</script>

<style lang="scss" scoped>
    .pagination-container0::v-deep{
      text-align: right;
      padding: 10px 0;
    }

    .pagination-container1::v-deep{
      text-align: right;
      padding: 10px 0;
      .el-pager {
        //li:nth-child(7) {
        //  display: none;
        //}
        li:nth-child(8) {
          display: none;
        }
      }
    }

    .pagination-container2::v-deep{
      text-align: right;
      padding: 10px 0;
      .el-pager {
        li:nth-child(1) {
          display: none;
        }
        //li:nth-child(2) {
        //  display: none;
        //}
        //li:nth-child(8) {
        //  display: none;
        //}
        li:nth-child(9) {
          display: none;
        }
      }
    }

    .pagination-container3::v-deep{
      text-align: right;
      padding: 10px 0;
      .el-pager {
        li:nth-child(1) {
          display: none;
        }
        //li:nth-child(2) {
        //  display: none;
        //}
      }
    }
</style>

结束语：第一次发布文章，可能写的不够全面，有什么问题欢迎私信问我。