更改element-ui中的分页器样式——功能实现

Myth丶恋晨 2022-10-20 01:30 587阅读 0赞

在工作过程中，经常会用到`table`表格用于数据的展示，对应的数据过多时，则需要用到分页器。

`elementUi`中已经有了很多分页器的样式，完全可以满足正常的使用需求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
如果想要实现下方的分页器的样式，则需要改动样式及部分功能：  
![在这里插入图片描述][20210712161231205.png]  
首先可以看到想要的效果图中，跟`elementUi`中红框标注的样式很类似。  
区别在于：

1.  页码的背景颜色及边框
2.  上页 下页将图标改为文字
3.  添加首页 尾页

`html`部分代码如下：

`css`样式部分代码如下：

.page { 
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #656565;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    
    .page > div.homePage, .page > div.lastPage { 
        height: 34px;
        line-height: 34px;
        width: 50px;
        text-align: center;
        border: 1px solid #EAEAEA;
        box-sizing: border-box;
        cursor: pointer;
    }
    
    .page > div.homePage { 
        border-right: none;
        border-radius: 2px 0 0 2px;
    }
    
    .page > div.lastPage { 
        border-left: none;
        border-radius: 0 2px 2px 0;
    }
    
    .el-pagination { 
        text-align: center;
        padding: 0;
    }
    
    .el-pagination > button { 
        padding: 0 !important;
        height: 34px !important;
    }
    
    .el-pagination > button.btn-prev { 
        border-right: none !important;
    }
    
     .el-pagination span { 
         color: #656565;
         width: 50px;
         border: 1px solid #EAEAEA;
         height: 34px !important;
         line-height: 34px !important;
         box-sizing: border-box;
     }
    
     .el-pagination .el-pager .number, .el-icon.more.el-icon-more { 
         color: #656565 !important;
         border: 1px solid #EAEAEA;
         height: 34px !important;
         line-height: 34px !important;
         box-sizing: border-box;
     }
    
    .el-icon.more.btn-quicknext.el-icon-more { 
        border-right: none;
    }
    
    .el-icon.more.btn-quickprev.el-icon-more { 
        border-left: none;
    }
    
    .el-pagination .el-pager .number:not(:first-child) { 
        border-right: none !important;
    }
    
    .el-pagination .el-pager .number.active { 
        background: #FF9900;
        border: 1px solid #FF9900;
        color: #FFFFFF !important;
    }

`js`部分代码如下：

homePageFn() { 
        if (this.searchInfo.PageIndex == 1) { 
            return;
        }
        this.searchInfo.PageIndex = 1;
        //this.getList(); 调取列表数据
    },
    lastPageFn() { 
        var lastPage = Math.ceil(this.TotalCount / this.searchInfo.PageSize);
        if (this.searchInfo.PageIndex == lastPage) { 
            return;
        }
        this.searchInfo.PageIndex = lastPage;
        //this.getList();调取列表数据
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221004/44343582e33f434aaf801bb9ab34f5dd.png
[20210712161231205.png]: /images/20221004/5d59d91be38c4432be5b41ad027721cc.png