element ui——Pagination 自定义分页样式_elementui 分页自定义

我们可以看到，element ui Pagination分页默认样式 直接显示 首页 - 中间页 - 末页，但当项目中数据量过大时，用户直接点击最后一页 可能会导致后端elk崩溃。项目最后要求 不能把最后一页呈现给用户，只能让用户一个一个点过去类似与下图

想接着用 element ui Pagination分页 也想改变分页的显示样式，经过翻查文档看到 Slot

layout=“total, sizes, prev, slot, next” slot代表的插槽 显示样式为下图

slot就是我们自定义分页的地方

类似于  showNumList = [1,6]  //最小分页数 和最大分页数
 <ul class="pageUl">
   <li class="pageLi" @click="handleCurrentChange(item)" v-for="item in showNumList" :key="item" :class="item == page.pageNo ? 'tePageLi' : ''">
   {
   {
   item}}
   </li>
 </ui>
1
2
3
4
5
6
7
8

逻辑思维
var 定义页面最大页码 = 我们定义一个数
var 总页数 = 总数/每个显示的数量
var min = 1 //最小页码
var max = 1 //最大页码
1、如果总页数 小于 定义页面最大页码 则 max = 总页数 其他的逻辑思维都跟他无关了
2、如果总页数 大于 定义页面最大页码 max = 定义页面最大页码 然后在判断 当前点击的页码 是否大于 定义页面最大页码 / 2 如果大 则 max = 定义页面最大页码
如果小
//min
if(当前点击页码 - parseInt( 定义页面最大页码 / 2) > 0){
min = 当前点击页码 - parseInt( 定义页面最大页码 / 2)
}else{
min = 1
}

//max
if(总页数 > 当前点击页码 + parseInt( 定义页面最大页码 / 2)){
max = 当前点击页码 + parseInt( 定义页面最大页码 / 2)
}else{
max = 总页数
}

下面贴上完整代码

封装的ThePagination

<template>
    <!-- 配置分页的组件 -->
    <section>
        <div class="pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @prev-click="handleCurrentChange"
                @next-click="handleCurrentChange"
                :current-page.sync="page.pageNo"
                :page-size="page.pageSize"
                :page-sizes="[10, 50, 100, 200]"
                :total="page.total"
                layout="total, sizes, prev, slot, next"
                ref="pagination"
            >
                <ul class="pageUl">
                    <li class="pageLi" @click="handleCurrentChange(item)" v-for="item in showNumList" :key="item" :class="item == page.pageNo ? 'tePageLi' : ''">{
   {
   item}}</li>
                </ul>
            </el-pagination>
        </div>
    </section<
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23